Question

我在Angular JS中通过ng-repeat渲染一个jQuery数据表。该表位于bootstrap选项卡（主要是隐藏的）内部，也位于bootstrap手风琴内。现在我的桌子正在占据全宽，但桌头没有占据全宽并且在左侧聚集。我在选项卡更改时调用了 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 DataTable调整列宽。

解

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

$('#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方法。

LINKS

当最初隐藏表时，请参阅jQuery DataTables – Column width issues with Bootstrap tabs以获取jQuery DataTables中列最常见问题的解决方案。

jQuery数据表头没有占用全宽

1 个答案:

原因

解

LINKS