html - DataTables 正在使用 Bootstrap 3.3.7 应用程序中的 ajax 源数据更改列的宽度

Question

我的应用程序正在使用:

• 数据表 1.10.16
• Bootstrap 3.3.7
• jQuery 3.2.1

场景:

我正在尝试将表单输入添加到表格的标题中，以允许按 2 列进行搜索。这是我的应用程序的自定义功能；它不是 DataTables 提供的搜索工具。

问题:

我希望搜索输入以每列的全宽显示。我希望它看起来像这样:

但它是这样呈现的——请注意搜索输入的宽度已减小:

(由于是私有(private)应用，表格数据模糊)

我使用的标记基于 Bootstrap 的列系统 - 我使用了 2 .col-md-6所以 <th>元素等宽:

<table id="regulatoryInformationTable" class="table responsive display table-striped pb-25" cellspacing="0" width="100%">
    <thead>
        <th class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Search Regulation Name">
            </div>
        </th>
        <th class="col-md-6">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Search Regulation Data">
            </div>
        </th>
    </thead>
</table>

如果我打开带有此标记的页面，它会按照第一个屏幕截图呈现 - 但表中没有任何数据 - 因为此时我还没有发出 ajax 请求并更新 DataTable。

当我发出 ajax 请求时，表格已填充，但随后输入的宽度似乎缩小了。我的 js 使用 DataTables 并发出 ajax 请求如下:

$(function() {

    /* Populate table of Regulatory Information */
    var regulatoryInformationTable = $('#regulatoryInformationTable').DataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "ajax": {
            "url": "/get-data.json",
            "method": "POST",
            "cache": false,
            "dataSrc": function (json) {
                return json.data;
            }
        },
        "columns": [
            {"data": "display_label", "name": "display_label"},
            {"data": "display_value", "name": "display_value"},
        ],
        "columnDefs": [
            {"width": "50%", "targets": 0},
            {"width": "50%", "targets": 1},
            {"orderable": false, "targets": [0,1]} // Can't order
        ],
        "paging": false, // no pagination
        "language": {
            "zeroRecords": "Sorry we no data for this substance",
            "infoFiltered": "",
            "infoEmpty": "",
            "processing": '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
        }
    });   
}); 

我用过 columnDefs指定数组 width: 50%但这没有任何区别 - 即使我将其删除。

谁能建议如何解决这个问题？

Answer 1

如果你不想自动添加宽度，我在几周前也面临同样的问题，

table {
table-layout: fixed;
width: 100%; 

}

所以不会出现这种闪烁。因为它的基本表格功能可以根据内容调整 td 大小。