Deleted Datatable Row Gets Added Again After Sorting

I am using the DataTables jQuery plugin to display an HTML table and I have made an AJAX row deletion function that sends the deletion POST request in the background and displays t

Solution 1:

I never used DataTable before but reading your question I was curious to learn a bit.

Then I noticed that you're removing the row merely using jQuery .remove() on the given row (in other words removing the real exposed DOM row), while this DataTable page states you should use the dedicated .row().remove().

So in your example I guess you should replace $('#row' + setID).remove(); by yourDataTable.row($('#row' + setID)).remove();.

EDIT. Thanks to the @Bryan Ramsey's comment, I just realized that my suggested solution was incomplete:

• the statement used by the OP $('#row' + setID).remove();only removes the row from DOM, but keeps it in the DataTable object so it appears again furtherly
• then I suggested to rather use yourDataTable.row($('#row' + setID)).remove();, which really removes the row from the DataTable object, but now keeps it in the DOM so it doesn't visually disappear before the next change happens!
• so the real complete solution is yourDataTable.row($('#row' + setID)).remove().draw();, where draw() ensures the row to immediately disappear.

NOTE: (if you're getting .row is not a function or $datatable is not defined) You must reintialize your datatable before removing the row as

var$datatable = $('#datatable-selector').DataTable();
$datatable.row($deletingRowSelector).remove().draw();

Solution 2:

You need to delete it form the APi it self like this When the 'table' is called by:

var table = $('#yourDatatableId').DataTable();

Then:

...done
    (
        function(data)
        {
            //No need for these://$('#info').html(data);    //var setID = id;

            table.row( $(this).parents('tr') ).remove().draw();    
        }
    );