Multiple Tables on Page with Select Filtering

cint116

I am having a problem with multiple tables on a page with select filtering. Multiple tables on a page works and select filtering works but I have a problem when I try to combine both on the same page.

For an example I am going to start with the multi_filter_select.html code and modify it to include a second table which is identical to the first table except for the table id. This is added after the first table:


... end of first table










Rendering engine
Browser
Platform(s)
Engine version
... rest of the second table is identical to the first table


then in the ready function I initialized both the first table and the second table:

$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );

var oTable1 = $('#example1').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable1.fnGetColumnData(i) );
$('select', this).change( function () {
oTable1.fnFilter( $(this).val(), i );
} );
} );

} );


When it runs the first table will have selective filtering. The second one will not have filtering.


Then I tried adding an id for the table footers:

for the first table:


for the second table:



And I modified the initialization to access each;

/* Add a select menu for each TH element in the table footer */
$("#tfoot0 tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );




/* Add a select menu for each TH element in the table footer */
$("#tfoot1 tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable1.fnGetColumnData(i) );
$('select', this).change( function () {
oTable1.fnFilter( $(this).val(), i );
} );
} );

Now neither table has the selective filtering.


What am I doing wrong?

I am running DataTables 1.8.1 and Firefox 5.0


Thanks,


Art

cdaigle

Hi Art,

Try removing the tfoot part from your loops.
[code]
/* Add a select menu for each TH element in the table footer */
// Was $("#tfoot0 tfoot th").each
$("#tfoot0 th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );

/* Add a select menu for each TH element in the table footer */
// Was $("#tfoot1 tfoot th").each
$("#tfoot1 th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable1.fnGetColumnData(i) );
$('select', this).change( function () {
oTable1.fnFilter( $(this).val(), i );
} );
} );
[/code]

The id #tfoot0/1 already selects the tfoot, so the tfoot subfilter looks for a tfoot node inside a tfoot (which doesn't exist).

Hope this helps.

cint116

That worked on the example code. Now all I need to do is get my actual code to do the same and I'll be all set.

Thanks much for the assistance. - Art