jQuery 数据表标题没有占用全宽

Question

我在 Angular JS 中通过 ng-repeat 渲染一个 jQuery 数据表。该表位于引导选项卡内（主要是隐藏的），也在引导手风琴内。现在我的表格主体正在全宽，但表格标题没有全宽并且聚集在左侧。 我在标签更改时调用了 column.adjust() 函数，但没有结果。 它是 jQuery Datatable 中的错误吗？或者你能帮我看看我哪里做错了。

在标签更改时；

$('#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 中列最常见问题的解决方案。