Howto: Multiple Data Tables with Individual Column Filters

drmikecrowe

Here's how I worked out multiple DT on a page with individual column filters (a la http://datatables.net/examples/api/multi_filter.html):

Each Datatable needs to have a unique ID:
[code]

[/code]

Next, I added a class to each footer search field to distinguish the different search filters:
[code]



....


[/code]

Each oTable must be unique:
[code]
var oTable1 = jQuery('#datatable1').dataTable({
[/code]

Now, here's the core issues:
1) asInitVals is global, so each column filter is offset within the table:
* Table 1: Offset 0..x
* Table 2: Offset x+1 .. y
* Table 3: Offset y+1 .. z
2) When you access $("tfoot input").index(this), this is the index within the asInitVals table. You should only send those values to the correct filter (this is the code from the 1st table -- the 2nd/3rd tables would have similar code):

[code]
$("tfoot input").keyup( function () {
if ( $("tfoot input").index(this) < 14 ) // <--- This table has 14 columns, so index is 0..13
oTable1.fnFilter( this.value, $("tfoot input").index(this) );
} );

$("tfoot input").each( function (i) {
if ( $(this).hasClass("dt1") )
{
asInitVals[i] = this.value;
}
} );

$("tfoot input").focus( function () {
if ( $(this).hasClass("search_init1") )
{
$(this).removeClass("search_init1");
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( $(this).hasClass("dt1") )
{
$(this).addClass("search_init1");
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
[/code]

Table #2's code would refer to #dt2 and check for the proper values:
[code]
$("tfoot input").keyup( function () {
if ( $("tfoot input").index(this) >= 14 && $("tfoot input").index(this) < 22 ) // <--- This table has 8 columns, so index is 14..21
oTable2.fnFilter( this.value, $("tfoot input").index(this)-14 ); // <-- Adjust index by table offset
} );

$("tfoot input").each( function (i) {
if ( $(this).hasClass("dt2") )
{
asInitVals[i] = this.value;
}
} );

$("tfoot input").focus( function () {
if ( $(this).hasClass("search_init2") )
{
$(this).removeClass("search_init2");
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( $(this).hasClass("dt2") )
{
$(this).addClass("search_init2");
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
[/code]

etc.

allan

Hi,

Thanks very much for sharing this with us - really useful!

Allan

panpansh

Thank you very much for giving your solution I was really happy !!!!
This is what I need :) thx