Individual column filter with multiple div / tables

bbarani

Hi,

I am very new to datatables, and relatively new to jquery.

I am using data tables with individual column filtering using fnFilter for filtering individual columns. Everything seems to work fine when I apply fnfilter to just one but behaves weird when I have multiple tables under different div tab.

This is what I do..

1. User inputs a value in to search box and searches for some data. I create a new tab (new div) / table on the fly and attach datatable to the table element.
2. When the user hits the search button I fire a ajax post and load the response using datatable.
3. I also append the below html code after the datatable is created (inside the function which invokes datatable()) in order to get the search box in the table along with header.









Everything seems to work fine for one search (one tab / table), but when a new tab opens (along with new datatable / search box) the individual filter works weird. When I type some value in the individual filter box the filter happens on some other column, sometimes the data entered in the individual filter appears on 'search all columns' search box. Can someone let me know how to accomplish individual column filtering when displaying multiple table using multiple div on same page?

Thanks,
Barani

bbarani

Forgot to mention, I append the html code to head of table after the creation of datatable using append method as below,

$("#tableName head").append(the below html)

html:
[code]






[/code]