Multiple Tables, both with Column Filter Footers, Interference
Multiple Tables, both with Column Filter Footers, Interference
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!
[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!
This discussion has been closed.
Replies
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.
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.
[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
[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.
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
http://mloader.com/datatables/multi-test.html
Allan