How to adapt datatables example “multi-filter” for multi-table support

Question

After successfully implementing datatables multi-filter to my system for one table, I'd like to implement it for all of my tables, which are organized by several tabs, like shown here .

To reach that, I think I have to set three individual variables:

var oTable0 = $('#tabs-0 table.display').dataTable({
var oTable1 = $('#tabs-1 table.display').dataTable({
var oTable2 = $('#tabs-2 table.display').dataTable({

For filtering, I should need something like:

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
  oTable0.fnFilter( this.value, $("tfoot input").index(this) );
  oTable1.fnFilter( this.value, $("tfoot input").index(this) );
  oTable2.fnFilter( this.value, $("tfoot input").index(this) );
});

For the table footers I also have to individualize the rows. Here an example for the first table:

<th>
  <input type="text" name="search_tabs0_rfid" value="Search column" class="search_init0" />
</th>
<th>
  <input type="text" name="search_tabs0_art" value="Search column" class="search_init0" />
</th>
...

For adapting the user friendlyness part I thought of:

$("tfoot input").each( function (i) {
    asInitVals0[i] = this.value;
    asInitVals1[i] = this.value;
    asInitVals2[i] = this.value;
});

$("tfoot input").focus( function () {
    if ( this.className == "search_init0" ){ this.className = ""; this.value = "";}
    if ( this.className == "search_init1" ){ this.className = ""; this.value = "";}
    if ( this.className == "search_init2" ){ this.className = ""; this.value = "";}
});

$("tfoot input").blur( function (i) {
    if ( this.value == "" ){ this.className = "search_init0"; this.value = asInitVals0[$("tfoot input").index(this)];}
    if ( this.value == "" ){ this.className = "search_init1"; this.value = asInitVals1[$("tfoot input").index(this)];}
    if ( this.value == "" ){ this.className = "search_init2"; this.value = asInitVals2[$("tfoot input").index(this)];}
});

Now, the first Tab (#tabs-0) is working fine, but the rest is not.

Maybe the part

$("tfoot input")

Is a problem because this occurs in every one of the three individual tables.

So, how can I get these column searches bound to their specified table? Which part did I miss?

Cheers, thowi

Answer 1

Whenever you want to isolate instances start from an ancestor element that isolates only the instance elements needed which I think could be tfoot in your case.

$("tfoot input").blur( function (i) {
    /* traverse up the document tree to ancestor needed*/
    var $parent=$(this).closest('tfoot');
    /* index only the inputs in current parent tfoot*/
    var index=$parent.find('input').index(this);
    /* more code*/
});

If you needed to interact with the dataTables API...can look up to the table itself and do something like:

$parent.closest('table').datatables_API_method()