Column widths incorrect on tabs

day

Hi,
I have 4 datatables on separate tabs (jQuery UI tabs).
I'm loading each datatable with ajax. The first datatable columns render perfectly, but the other datatables don't render properly.

If I type something in to the search box on one of the incorrect datatables, the columns are resized (although, not to the widths I've specified).

Can you see what I have done wrong?

This only seemed to happen once I changed from pagination to scroller.


You can see what I have here apps.snowrepublic.co.uk/property/view.php

Here's the js:
[code]
$("#tabs").tabs({
"show": function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
});

$('.display').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bDeferRender": true,
"bScrollCollapse": true,
"sScrollY": "300px",
"sAjaxSource": "ajax.php",
"sDom": '<"H"lfr>t<"F"iS>',
"oScroller": {
"loadingIndicator": true
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "tab", "value": $(this).closest(".dataTables_wrapper").attr("id") } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
},
"iDisplayLength": 50,
"aLengthMenu": [[50, 100, -1], [50, 100, "All"]],
"aoColumns": [
{ "sWidth": "2%", "mData": null, "sClass": "detail-show" },
{ "sWidth": "23%" },
{ "sWidth": "14%" },
{ "sWidth": "14%" },
{ "sWidth": "14%" },
{ "sWidth": "14%" },
{ "sWidth": "15%", "sType": "currency" },
{ "sWidth": "2%" }
],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0,7 ] },
{ "bVisible": false, "aTargets": [ 8,9 ] },
{ "aTargets": [ 7 ],
"mRender": function ( data, type, full ) {
return '';
}
}
],
"aaSorting": [[1, 'asc']]
});
[/code]

allan

You might want to try the `activate` event in jQuery UI. They changed their API a little while back.

This is the updated example for DataTables 1.10: http://next.datatables.net/examples/api/tabs_and_scrolling.html .

Allan

day

Thanks Allan,
I've just found that one out and came back to report that was the fix :)