Multiple tables inside tabs---

Joy

Have multiple tables inside tabs :

step 1: Import and link all files(JS & CSS):

[code]

step 1 :
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";









[/code]



step 2 :

[code]
$(document).ready(function() { /* Initialise the DataTable */
var oTable1 = $('#example1').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });
var oTable2 = $('#example2').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });
var oTable3 = $('#example3').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });
/* Add a select menu for each TH element in the table footer */


$("#example1 thead tr").clone().prependTo($("#example1 thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable1.fnGetColumnData(i));

$('select', this).change(function() {oTable1.fnFilter($(this).val(), i); }); } );


$("#example2 thead tr").clone().prependTo($("#example2 thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable2.fnGetColumnData(i));

$('select', this).change(function() {oTable2.fnFilter($(this).val(), i); }); } );

$("#example3 thead tr").clone().prependTo($("#example3 thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable3.fnGetColumnData(i));

$('select', this).change(function() {oTable3.fnFilter($(this).val(), i); }); } );




}

[/code]



step 3 : Make three datatables with unique ids (same ids given above)


[code]


Table1
Table2
Table3


Click this tab again to close the content pane.






Rendering engine
Browser
Platform(s)
Engine version
CSS grade


//.....................tbody
//.....................tfoot
//........................table





Click this tab again to close the content pane.






Rendering engine
Browser
Platform(s)
Engine version
CSS grade


//.....................tbody
//.....................tfoot
//........................table




Click this tab again to close the content pane.






Rendering engine
Browser
Platform(s)
Engine version
CSS grade


//.....................tbody
//.....................tfoot
//........................table




[/code]

allan

Nice little tutorial - thanks :-)

Regards,
Allan

Joy

Ur welcome :-)

Luys

Thank you very much, Joy, for this post!!!

These days I ended up implementing a solution with three tabs that had embedded two tables with bJQueryUI enabled in the first two tabs.
I have little expertise and I had to opt for the use of two iframes to get by and be practical. Finally, yet visually it's all good, but as expected the second hidden table in the second tab fails to initialize and appear as empty or half drawn in IE and Firefox.
I will look to address this problem but meanwhile how anyone could redraw or initialize this table using a standard (#example) text web link or button?
I'm afraid to take long to adapt my work and need an immediate interim solution. The truth is that much effort it costs me everything ... :-(

Thanks again and again! "Moltes gràcies".

Luys

P.S.: Would not it be possible to create a reset button to redraw or reinitialise a table like the ones embedded in the top left of TableTools examples? ;-)