all datables for each tab is showing?

pg_lhelton

Hi, so I am having an issue when trying to display my tabs. i have two divs of tabs each with three tabs in them:

[code]


Table1-1
Table1-2
Table1-3


....


....


....




Table2-1
Table2-2
Table2-3


....


....


....


[/code]

the script code for these tabs with datatables is as follows:

[code]
$("#tabs1").tabs( {
"select": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );

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

$('table.display').each(function(){
$(this).dataTable( {
"bAutoWidth" : true,
"iDisplayLength" : 10,
"bFilter" : false,
"bLengthChange" : false,
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true
} );
});
[/code]

however when I run the program the tabs show up in a horizontal list with the tables beneath:

Table1-1
Table1-2
Table1-3
content of first table
content of second table
content of third table

Table2-1
Table2-2
Table2-3
content of first table
content of second table
content of third table

I am not getting any errors...any idea what is wrong? thank you so much!