Switching between Tabs give issue with Column Filter

viral

I am having problem with EasyTab (jquery plugin for tabs ) and Datatables.
I have 5 tabs and each tab have table (which contains around 500 rows from database) and I have applied column filter on each table row.
Problem:
When I am on Tab 1 the column filter works. Now When I move to Tab 2 it works fine. The problem is when I go back to Tab 1 the column filter does not work and throws following error

oSettings.aoPreSearchCols[iColumn] is undefined
oSettings.aoPreSearchCols[ iColumn ].sSearch = sInput;

Here is my JavaScript code:

var oTable = $('#tab1_table’).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bAutoWidth": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [4] }
],
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"bRetrieve": true

});
var oTable1 = $('#tab2_table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bAutoWidth": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [4] }
],
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"bRetrieve": true

});

/*Filter Result on Process and Control main Page*/
var asInitVals = new Array();
$("#tab1_table thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );

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

} );

$("thead input").each( function (i) {
asInitVals[i] = this.value;

} );

$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
});

I guess, that Tab1 is not able to recognize the call once tab2 is loaded.

Any guidance is appreciate.

fbas

are you using the same variable name for your table ("oTable") on each tab? seems like you're overwriting your variable, or something similar.

viral

I am using oTable and oTable1..I know its not able read the oTable variable once oTable1 is loaded..is it because the content of tab is loaded via Ajax call... not sure...

fbas

do you redeclare jquery in that new page that you call into the tab?

viral

I guess...you are right...let me try that...mostly that is my problem... Thanks for prompt response...

viral

I tried that as well but I am facing same problem. When I go from tab1 to tab2 (even though I am not applying column filter on other tabs. I decide to have column filter in one tab to test) and come back to tab 1 I still get error
[code]
oSettings.aoPreSearchCols[iColumn] is undefined
[Break On This Error] oSettings.aoPreSearchCols[ iColumn ].sSearch = sInput;
[/code]
Anybody...faced this problem before.

Viral

ronaldud

I had the same error. The problem is that enabling jqueryui added divs within th, so the selector $(thead input).index(this) returns -1. What I did was change the selector for $(this).parents('td:first').index();