javascript - jQuery 数据表标题未占用全宽

Question

我在 Angular JS 中通过 ng-repeat 渲染一个 jQuery 数据表。该表位于 Bootstrap 选项卡(主要是隐藏的)内，也位于 Bootstrap Accordion 内。现在我的表体是全宽的，但表头不是全宽的，而是聚集在左侧。我在选项卡更改时调用了 column.adjust() 函数但没有结果。它是 jQuery 数据表中的错误吗？或者你能帮我看看我哪里做错了吗？

在选项卡更改时；

$('#toptab').on('click', function (e) {

    for(var i=0;i<$scope.grids.length;i++)
        $scope.grids[i].columns.adjust().draw();

});

用数据填充数据表

setTimeout(function() {
    table = $("#xl_" + key).DataTable({
        "aaData": tableBody,
        dom: 'Blfrtip',
        buttons: ['copy', 'csv', 'excel', 'print'],
        //"scrollX": true,
        "scrollY": true,
        "lengthMenu": [
            [100, 250, 500, -1],
            [100, 250, 500, "All"]
        ],
    })
    $scope.grids.push(table);
}, 1000)

Answer 1

原因

您的表格最初是隐藏的，这会阻止 jQuery DataTables 调整列宽。

解决方案

如果表格位于可折叠元素中，则需要在可折叠元素可见时调整标题。

$('#myCollapsible').on('shown.bs.collapse', function () {
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

如果表格在选项卡中，您需要在选项卡可见时调整标题。

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

上面的代码调整页面上所有表格的列宽。

参见 columns().adjust() API 方法以获取更多信息。

链接

参见 jQuery DataTables – Column width issues with Bootstrap tabs用于解决最初隐藏表时 jQuery DataTables 中列的最常见问题。