Datatables and Spry Tabbed Panel

Notace

Hi.

I am attempting to embed Datatables into a Spry Tabbed Panel, one table per tab. I can get it to work if I put all my tables into a single tab. However, when I put the tables into separate tabs, the initialisation only partially works. Here's what I've found:

1. The panel that opens by default, or the one which opens as a result of using the TabbedPanels1.showPanel("tab2") function, is fine.

2. If I switch to another tab, the data is there, as is the scroll bar and search box, which both work. However there are no headings, and no sorting.

3. If I then enter something into the search box, the headings appear and sorting on columns is possible (i.e. the table nor works normally). I can then move from tab to tab and it all works fine.

I tried to include sample HTML, but the post was rejected because it was too long. How can I submit the sample to you?

As it seems that entering something in the search box causes some form of initialisation or redraw to occur, is there some API function I can call at startup to force this to happen. Where would I put such a call? (Treat me as a complete newbie here, please.)

Thanks. I love datatables, and so do my users. Keep up the good work!

Regards,
Ron

Notace

OK. I've been able to get this working. I'll assume if you're reading this you know the basic workings of Spry TabbedPanels and DataTables. Assume we have a Spry TabbedPanel set up with three Tabs, each of which has a DataTable embedded in it. The id's for these tables are "table1" , "table2" and "table3"

So, my initialisation for the two tables is something like
jQuery(document).ready(function() {
oTable = jQuery('#open').dataTable( {
"sScrollY": "350px",
"bScrollCollapse": true,
"bPaginate": false,
"bAutoWidth": true,
"bSort": true,
"bInfo": false,
"aaSorting": [[ 0, "desc" ]],
"oLanguage": {"sSearch": "Search all columns:"}
} );
oTable2 = jQuery('#expired').dataTable( {
"sScrollY": "350px",
"bScrollCollapse": true,
"bPaginate": false,
"bAutoWidth": true,
"bSort": true,
"bInfo": false,
"aaSorting": [[ 0, "desc" ]],
"oLanguage": {"sSearch": "Search all columns:"}
} );
oTable3 = jQuery('#confirmed').dataTable( {
"sScrollY": "350px",
"bScrollCollapse": true,
"bPaginate": false,
"bAutoWidth": true,
"bSort": true,
"bInfo": false,
"aaSorting": [[ 0, "desc" ]],
"oLanguage": {"sSearch": "Search all columns:"}
} );
var ret=TabbedPanels1.showPanel(1);
oTable2.fnDraw();
var ret=TabbedPanels1.showPanel(2);
oTable3.fnDraw();
var ret=TabbedPanels1.showPanel(0);
} );

TabbedPanels1.showPanel(n) opens the Tab numbered n. Numbering starts at 0, and tab 0 is opened by default.
fnDraw redraws the referenced table.

So the last 5 lines of the initialisation open each of the tabs except tab 0, which has already been rendered correctly, and calls the fnDraw() function for that table. Finally, I open up tab 0.

Now all my tables are correctly displayed.

I hope this saves some of yoiu a little time.

Regards

Ron