Search.push for dynamic data

Cooler123

I have an html table that gets filled from an ajax call upon click of button. so the number of rows and data can change.
I have implemented datatable on this with header filter.
Now when the data is refreshed using ajax, what i am doing is destroying the datatable and reinitializing it.
but the problem with this is: lets say in initcomplete function i have defined the filter function for the input in header, then even on destroying the table that event remains. so when next time i reload data and use the header filter the function gets called twice the amount of times and so on.

The same problem happens for $.fn.dataTable.ext.search.push function. It will store the number of rows the first time it is called and then work for those number of rows only even if the new data has more rows. and if i declare it within initialization function then it get called more than once when filter is used.

Any idea how can i reload data (ajax returning html) without destroying the table and the filter should be all working

kthorngren

When you destroy a Datatable it will remove all the event listeners it created. However you are creating the event listeners for the column searches. You will need to destroy them before destroying the Datatable.

Any idea how can i reload data (ajax returning html) without destroying the table and the filter should be all working

You can try rows().invalidate() to re-read the new HTML sourced table.

Kevin

Cooler123

rows.invalidate didnt work so i guess i will reset listeners. Just a question, lets say i edit a row using cell().data() and i have header dropdown filter enables.
Lets say the data in the cell was new in that column therefore distinct. Now obviously the dropdown filter wont show that distinct value as an option. So what is the best way to reset the dropdown filter? should i reinitialized or there is any better way.

One more thing, lets say i edited a row in the above way and i had some filters applied on the headers. Lets say the edited row doesnt adhere to the filter on top, so how do i make it such that in case the edited row does not match the filter then it is not shown in the result set.

kthorngren

rows.invalidate didnt work so i guess i will reset listeners

Basically the way Datatables works is it loads the data, whether from DOM sourced table, ajax or JS data, into a data cache that it uses for searching and sorting. If the table data is updated directly in the HTML then Datatables won't know about the changes. Which is why you need to destroy it when updating the table. However if you use Datatables API's to manipulate the table data then it will keep the cache updated without the need for destroying.

So what is the best way to reset the dropdown filter?

Checkout this thread.

so how do i make it such that in case the edited row does not match the filter then it is not shown in the result set.

I'm guessing you are directly manipulating the edited row in HTML. In that case use row().invalidate(). Or use row().data() to update the row data followed byt draw() to update the table's sorting and seraching.

Kevin

Cooler123

my problem is with $.fn.dataTable.ext.search.push
on destroying and recreating a datatable, it stops working.

what i have tried so far:
putting it in initcomplete function: if i put it here then it works but lets say the first initialized table had 15 rows and the second one had 16 rows, then when i use it for a header filter it now runs for 15+16 times. and the more times i initialize the table this count keeps increasing. Why does it remember 15?

Also since $.fn.dataTable.ext.search.push is showing this behaviour
will the same apply to $.fn.dataTableExt.afnFiltering.push

kthorngren

will the same apply to $.fn.dataTableExt.afnFiltering.push

That is the same function. It is using the legacy naming convention used by Datatables 1.9.

my problem is with $.fn.dataTable.ext.search.push
on destroying and recreating a datatable, it stops working.

Seems to work here:
http://live.datatables.net/zorelaxo/1/edit

Please update my example to show the issue.

Kevin