Q:

JQuery DataTable sorting conflicts with Ajax

So here it comes:
I used dataTable plugin to display my html table. When I clicked on the header of a column, that column got sorted. It works well. But when I tried to implement Ajax, it starts to have funky behavior. I am able to delete the DOM document via Ajax, and the row disappears from the table. But after that, if I clicked on the header of the table, suddenly, the row comes back and got displayed, even if it has already got deleted in the database! What's going on here with dataTable? I suspect that jQuery remove() doesn't remove the actual element from DOM of the page, somehow it remains there but not got displayed. So when I clicked on the header, the data table thought the row was still there. I got stuck. Can anyone help me with this? Your help is greatly appreciated. Thanks

A:

There could be one of many things happening here. 

Are you using a caching pipeline with "fnServerData"?
I'm guessing when you delete the row from the datatable you are also making an ajax call to delete it from the database. Are you making sure the action completed before you try to sort again?
Instead of doing a .remove() you could do a $("#tableID").fnDraw() on the success callback of your delete callback. This will cause datatables to grab the new data from the database and render the table for you.

When you use "bServerSide": true as an option for the datatable it is probably best practice to not remove the dom elements via jquery.remove() or another dom manipulation  approach but instead let datatable.fnDraw() handle adding and removing the columns based on the data it gets from the database for you.

