Tabs data not showing at first

Robayb

I am using Datatables 1.7.6.
I have 4 tabs that load datatables, but when I select a tab there is no data in the table unless I select another tab then return to the original tab...then the data appears.
In other words - I click on the 3rd tab(it is empty except the thead elements) - then I click on tab2 then click on tab 3 again - this time the data is there.

I have tried many things to resolve but need help at this point.

This is my :






@import "css/smoothness/jquery-ui-1.7.2.custom.css";
@import "dataTables-1.7.6/media/css/demo_table_jui.css";
.ui-tabs .ui-tabs-panel { padding: 5px }
.display { width: 100%;}


$(document).ready(function() {
$("#tabs").tabs();


$('#myTable1').dataTable( {
"bJQueryUI": true,
"bScrollCollapse": true,
"bPaginate": false
} );

$('#myTable2').dataTable( {
"bJQueryUI": true,
"bScrollCollapse": true,
"bPaginate": false
} );

$('#myTable3').dataTable( {
"bJQueryUI": true,
"bScrollCollapse": true,
"bPaginate": false
} );

$('#myTable4').dataTable( {
"bJQueryUI": true,
"bScrollCollapse": true,
"bPaginate": false

} );


} );

Robayb

I now notice that this happens only on the remote server and not localhost.
I have triple checked that all files have been transferred to remote server.
Does anyone know why the datatable will not populate on remote server when page first loads, but only after clicking on tab two times. But this does not happen on localserver.
Seems that data is hidden or not initialized when it firts loads, but I cannot find why.
Please help. Thanks