Multiple Tables, both with Column Filter Footers, Interference

SRussellN

I'm running into a situation where I have two distinctly named tables, both with filter inputs by column. I've found that even though I have set up both tables with:

[code]
$("tfoot input").keyup( function () {
oTable1.fnFilter( this.value, $("tfoot input").index(this) );
});
$("tfoot input").keyup( function () {
oTable2.fnFilter( this.value, $("tfoot input").index(this) );
});
[/code]

it still only filters on the first table, even when you type information into the second tables footer filters.

It is interesting that after putting text in the second tables' input filter box, then removing it, the previous helper text is put back correctly, not taking the helper text from the corresponding first tables' input filter box.

I had attempted to put in code to first check if "this.parentNode.parentNode.parentNode.parentNode.tagName == 'TABLE', then get the ID from that," but that wouldn't give me the id for some reason. If I did get the id, I was then going to help direct which table to call fnFilter.

Have I missed something already that works around my issue? (As in, did I forget some code to identify the proper table to do footer searching on?)

Thanks!

cdaigle

Hi there,

My guess is that the selector for the tfoot input is not specific enough. Can you try something like this?
[code]
function fnFooterFilter(sTableId) {
var nFilter = $('#'+sTableId+' tfoot input');
nFilter.keyup( function() {
$('#'+sTableId).dataTable().fnFilter( this.value, nFilter.index(this) );
} );
}
fnFooterFilter('table1Id');
fnFooterFilter('table2Id');
[/code]
No guarantees that this will work - but I believe you want to be more specific about which tfoot you specify - the first one you have up there will apply to _all_ tfoot inputs, for all tables on the page. By using the #id as an additional selector, you can narrow it down to one table for each keyup handler.

Hope this helps.

SRussellN

Unfortunately, adding the table-Id ( $('#'+sTableId+' tfoot input'); ) does not seem to help or fire off. I tried what you provided, but it didn't work. (But thank you for your help!)

I was then trying the following:
[code]
var tempTableTitle = "";
tempTableTitle = this.parentNode.parentNode.parentNode.parentNode.title;
[/code]
which did give me the correct title that I gave to each table, so I was able to do:
[code]
if(tempTableTitle == "Table Title Attribute 1"
{
oTable1.fnFilter( this.value, $("tfoot input").index(this) );
}
else if (tempTableTitle == "Table Title Attribute 2"
{
oTable2.fnFilter( this.value, $("tfoot input").index(this) );
}
[/code]
but in this case, only oTableId1 fires off the filtering. I have an alert in the "else if" to make sure I'm getting there, and I am.

I've moved the table2 initiation to above the table1, plus moved around the if/else if statement around so that table2 gets "found" first in the code. That still didn't work, so I'm assuming that just because table1 is created first on the actual page, that it becomes the only known table in this case.

bryceray1121

I'm interested in this problem as well. I'm trying to add a single text input which will filter all of the tables on the page. However, like SRussellN is experiencing only the first table is being filtered. My code is very similar but here it is:
[code]
$("#globalSearch input").keyup( function () {
oTable.fnFilter( this.value, $("#globalSearch input").index(this) );
});
[/code]

I've also tried the following which uses the class I orinally used to initiate all the tables.. But it throws an error (1 error for each table).
[code]
$("#globalSearch input").keyup( function () {
$(".dataTable").dataTables().fnFilter( this.value, $("#globalSearch input").index(this) );
});
[/code]
[code]
DataTables warning (table id = 'table1-table'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
[/code]

allan

If you are using $('.dataTables') and it's giving you multiple tables, you need to use "$.fn.dataTableExt.iApiIndex" to specify which of the tables you want it to operate on (it will only do the first by default). At some point in future I'll make it do them all...

Allan

bryceray1121

I got it working with this code:
[code]
$("#globalSearch input").keyup( function () {
for(var i=0;i<(oTable.length);i++){
$.fn.dataTableExt.iApiIndex = i;
oTable.fnFilter( this.value);
}
});
[/code]

Is there a more efficient way to do this? I've got 12 tables on 1 page and it moves awfully slow when using this code to filter.

mloader

Any other solutions? I tried the loop above and filtering one column effects both tables.

allan

> I tried the loop above and filtering one column effects both tables.

Isn't that the point of bryceray1121's code? It specifically loops over all tables applying the same filter.

What is it that you are looking for?

Allan

mloader

I guess I misunderstood. I have two tables I am identifying with a class name. The column filters work on the first table but not in the other.

http://mloader.com/datatables/multi-test.html

mloader

BTW you'll have to click "Column Filter" in the link I supplied.

allan

It appears to work just fine for me on the second page. I click the Column Filter icon (I presume this is one of the 3rd party add ons, or did you create that?) - then I put a '7' in the second column and it filters down to one row :-)

Allan