数据表列未对齐

Question

我在我的页面上使用bootstrap作为标签。这些选项卡内部是JQuery Data Tables。出于某种原因，当用户在页面加载后单击选项卡时，数据表的标题不会与行对齐。

如果我单击其中一个标题（命令列的按钮），则列会自行修复。有人可以帮帮我吗？我已经尝试过几个CSS和Javascript＆＃34; hacks＆＃34;解决这个问题。

我在这里初始化数据表：

$( ".dynamic-table" ).DataTable({
    "scrollY": 450,
    "scrollCollapse": true,
    "lengthMenu": [[10, 50, 500, -1], [10, 50, 500, "All"]]
});

Answer 1

  

<强>解

使用columns.adjust() API方法重新计算列宽。

来自manual：

  

如果表在初始化时隐藏（例如在选项卡中）或数据发生显着变化时隐藏，则调用该表。

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

  

<强>样本

请参阅this jsFiddle以获取代码和演示。

  

<强>链接

有关jQuery DataTables和Bootstrap选项卡最常见问题的解决方案，请参阅jQuery DataTables – Column width issues with Bootstrap tabs。

Answer 2

我找到了解决方案。这将在选项卡点击上以编程方式对第一个th进行排序，从而修复未签名的标题。为了使订单恢复原状，它会执行两次。

/* FIX FOR COLUMNS BEING UNALLIGNED */
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    var activeTabPanel = $('.tab-pane.active');
    activeTabPanel.find("th:first").click();
    activeTabPanel.find("th:first").click();
});