jQuery数据表响应式在Bootstrap选项卡中不起作用

Question

我是jQuery数据表的新手，现在正在使用响应式jQuery数据表。 在这里，我面临着jQuery数据表响应部分的问题。 第一个选项卡工作正常，当我转到第二个选项卡“收款人”时，它不起作用（加号将不会出现）。 带加号的按钮“ Click Me Popup”也不会出现。

如果表格较大，则会显示第一列加号。 第二个选项卡具有大列，此处的加号应出现在第一列中，但未显示。

我不知道原因，我尝试了以下脚本，但没有帮助我。

小提琴链接： https : //jsfiddle.net/97sos7dm/36/

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

Answer 1

您忘记了在第二个选项卡中初始化表。

$('#invoicedet, #invoicepayeedet').DataTable({
   // ... skipped ...
});

否则，使表在Bootstrap选项卡中工作的解决方案是正确的。

请参阅更新的示例进行演示。

有关更多信息，请参见jQuery DataTables：具有Bootstrap选项卡的列宽问题 。