问题描述:

I have jQuery UI Dialog with Tabs widget (2 tabs) and in every tab I have a one dataTable. First table has enormous column width, but second table is OK.

Here is initialisation of datatables:

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

});

And here is Tabs initialisation code which I find is SO:

$("#friendFamilyTabs").tabs({

activate: function (event, ui) {

var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();

if (oTable.length > 0) {

oTable.fnAdjustColumnSizing();

}

}

});

But it still works like simple tabs() initialisation which works good for table in second tab, but in the first table columns have completely enormous width.

Here is my JQuery UI Dialog initialisation:

 $("#friendFamilyDialog").dialog({

width: 500,

modal: true,

autoOpen: false,

show: {effect: "fade", duration: 1000},

hide: {effect: "fade", duration: 1000}

});

I will be vary happy if anybody helps me - thank you in advance.

@Update: I saw a little weird behavior - if I add ,,fake div", and then fake is first tab, first table is in second tab and second table in third tab - in first ,,fake" tab I see first table which is also in second tab - still first table has enormous column width and second is OK.

网友答案:

SOLUTION: I find a solution for this problem. All I need was first open the dialog (.dialog("open")) and then initialise datatable, earlier datatable was initialised in object which was hidden and that's why it calculates columns width incorrectly.

相关阅读:
Top