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

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.

This is an old question, so I'm not sure the api was available at the time. This question seems similar to this SO question, but it's hard to tell without details.

Your problem may be removing the data from the DOM without removing it from the DataTable. Their documentation says to remove data this way:

var table = $('#example').DataTable();
 
$('#example tbody').on( 'click', 'img.icon-delete', function () {
    table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
} );

The DOM reflects the changes with the .draw() command and removes the row with datatable with the .row().remove() api call.