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 ...
});

否则，您在“引导”选项卡中使表工作的解决方案是正确的。

请参阅updated example进行演示。

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