Question

我有带有Tabs小部件的jQuery UI对话框（2个选项卡），在每个选项卡中我都有一个dataTable。第一个表有很大的列宽，但第二个表是可以的。这是数据表的初始化：

friendsTable = $("#friendsTable").dataTable({
     "bJQueryUI": true,
     "aoColumnDefs": [ {"bVisible": false, "bSortable": false, "aTargets": [3]}],
      "bSortClasses": false
});
familyTable = $("#familyTable").dataTable({
     "bJQueryUI": true,
     "aoColumnDefs": [ {"bVisible": false, "bSortable": false, "aTargets": [3]}],
     "bSortClasses": false
});

这里是Tabs初始化代码，我发现它是SO：

$("#friendFamilyTabs").tabs({
activate: function (event, ui) {
    var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
    if (oTable.length > 0) {
        oTable.fnAdjustColumnSizing();
    }
}
});

但它仍然像简单的制表符（）初始化一样适用于第二个制表符中的表，但在第一个表中列的宽度非常大。这是我的JQuery UI Dialog初始化：

 $("#friendFamilyDialog").dialog({
        width: 500,
        modal: true,
        autoOpen: false,
        show: {effect: "fade", duration: 1000},
        hide: {effect: "fade", duration: 1000}
});

如果有人帮助我，我会很开心 - 提前谢谢你。

@Update ：我看到了一些奇怪的行为 - 如果我添加，假div“，然后假是第一个标签，第一个表位于第二个标签页，第二个表位于第三个标签页 - 首先，假的“选项卡我看到第一个表也在第二个选项卡中 - 仍然是第一个表有很大的列宽，第二个是好的。

Answer 1

解决方案：我找到了解决此问题的方法。我只需要打开对话框（.dialog（“open”））然后初始化数据表，早期的数据表在隐藏的对象中初始化，这就是为什么它不正确地计算列宽。

对话框中选项卡中的数据表 - 第一个表的列宽较差

1 个答案: