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 选项卡中制作表格的解决方案是正确的。

请参阅updated example 进行演示。

更多信息请参见jQuery DataTables: Column width issues with Bootstrap tabs。