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

Posted 2023-05-09

【中文标题】jQuery 数据表标题没有占用全宽

【英文标题】：jQuery datatable headers are not taking full width

【发布时间】：2017-07-15 06:28:00

【问题描述】：

我在 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)

【参考方案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 中列最常见问题的解决方案。

【讨论】：

这个解决方案效果很好......我的第二个解决方案，因为标签内的表格......谢谢:)