带有Bootstrap 3 nav-tabs类的Datatables jQuery插件 - 忽略第二个选项卡上的表选项

Question

我使用bootstrap 3和datatables jquery插件使用nav-tabs类在不同的选项卡上生成多个表。我遇到的麻烦是，第二个选项卡上的数据表似乎忽略了我在选项中设置的间距，这些选项在点击表格的不同页面时似乎再次发生变化！第一个选项卡上的表格完美无缺。

第一个标签的屏幕截图：

第二个标签：

我在文档就绪功能中设置了表格：

    $('#single_group_users_table').dataTable({
        "order": [],
        "columnDefs": [
            { "targets": 0, "width": "5%" },
            { "targets": 1, "width": "10%" },
            { "targets": [2,3], "width": "47.5%" },
            { "targets": 0, "orderable": false }
        ]
    });
    $('#single_group_add_users_table').dataTable({
        "order": [],
        "columnDefs": [
            { "targets": 0, "width": "5%" },
            { "targets": 1, "width": "10%" },
            { "targets": [2,3], "width": "47.5%" },
            { "targets": 0, "orderable": false }
        ]
    });

我唯一的想法是，一旦点击了标签，我可能需要重新绘制表格，但我不确定这是否会产生影响。

有没有人使用过这个插件和bootstrap有任何想法吗？

稍微相关的查询，加载这些表的最佳做法是什么？如果站点在多个页面上有多个数据表，我可以安全地将所有内容粘贴到文档加载函数中的一个.js中吗？

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以获取代码和演示。

LINKS

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