Question

我一直在使用带有固定列的jquery Datatable作为所需的功能之一。

但是在初始加载表时，固定列不起作用，并且分页按钮位于标题的顶部。一旦我点击分页功能长度下拉列表中的任何数字，问题就解决了。

这是图像：

单击dataTable的任何函数后的

这是我使用的代码：只是dataTable示例中的代码

table = $('#example').DataTable({
            scrollX: "100%",
            scrollCollapse: true,
            paging: true,
            fixedColumns: {
                leftColumns: 3
            }
        });

这是我的HTML

<div class="tab-content container-fluid">
    <div class="col-md-12">
        <div id="" class="tab-pane active">
            <table class="table">
                <thead></thead>
                <tbody></tbody>
            </table>
</div></div></div>

我还没有使用过任何自定义的CSS。任何人都可以了解这一点。感谢

Answer 1

您已在评论中指出您的表最初是隐藏的，位于标签中。

一旦表变得可见，您需要使用以下代码。

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

有关详细信息，请参阅fixedColumns().relayout() API方法。

有关详细信息和示例，请参阅jQuery DataTables: Column width issues with Bootstrap tabs文章。

Answer 2

当我在选项卡中有数据表时，我会使用它：

$("#tabs").tabs({
        activate: function(event, ui){
            var selectedTab = ui.newTab.index();

            if (selectedTab == 0) { //first tab (datatable 1)
                $dataTable1.columns.adjust().draw();
            }

            if (selectedTab == 1) { //second tab (datatable 2)
                $dataTable2.columns.adjust().draw();
            }

        }
    });

如何修复jquery datatable固定列不能在初始加载时工作？

2 个答案: