multiple tables + AJAX update + filtering

diarmuid

Hi

First off, thanks for such a great plugin. I'm amazed at what is possible with it...

However I've been banging my head against a problem the last 2 days. I'm a JS novice which is part of the problem

I have a very simple page which has lots of dataTables (and normal tables) added to it via AJAX calls. In many of these tables I have filtering enabled on a per column basis. For the first table this works fine however I on the following tables it does not work at all.

The code

[code]
$("body").delegate("input", 'keyup', function () {
var oTables = $(this).closest("table").dataTable();
oTables.fnFilter( this.value, oTables.oApi._fnVisibleToColumnIndex(oTables.fnSettings(), $("thead input").index(this) ) );
} );

// helper functions
$("body").delegate( "input", "focus", function () {
if ( this.className == "search_init" )
{
this.initVal = this.value;
this.className = "";
this.value = "";
}
} );

$("body").delegate("input", "blur", function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );

[/code]

I think I know the problem but I don't know how to solve it.

I think before the fnFilter line, I should tell dataTables which table to filter as it defaults to the first one using
[code]
$.fn.dataTableExt.iApiIndex = i;
[/code]

However I don't know how to figure out i.

Am I on the right track? How do I figure out "i"? I tried using .index() but didn't seem to get anywhere.

One strange side effect of the broken filtering is that on entering some data in the filter of the second (and higher) tables, a new(second) search box appears just above table.... I guess if I figure out the solution to the first problem that will disappear.

diarmuid

any ideas before I do my head in for another afternoon ? :)

fbas

Why not add ID's to your tables? with the table id, you can get the datatable instance and run filter specifically on that instance.

$('#table_id').fnFilter(...);

you could add some attribute to your inputs to let them know which table id they are associated with.
perhaps use the NAME attribute (unless you're using the name for something else).

[code]
$("body").delegate("input", 'keyup', function () {
var sTableId = $(this).attr("name");

$('#'+sTableId).fnFilter( this.value, ... );

} );
[/code]

or rather than trying to put all your handlers in one general function, write separate handlers for the different tables.

diarmuid

thanks for that... That seems to make sense. I'll give it a shot