How to refresh jquery datatable after deleting a row

Question

Each row in the data table has a delete button.

On click of the delete button, I am calling this code:

$('.deleteButton').live('click', function () {

             var $this = $(this);
             var url = $this.attr("id");
             $("#example").fnReloadAjax();
             $.getJSON(url, Success());
         });

The url is action of the controller that takes the Id and deletes the data from the database. That works. I now want to call the refresh/redraw function of datatable so it can load new results but it doesn't work.

Datatable is:

 $("#example").dataTable({
             "aoColumns": [
                     { "sTitle": "Id" },
                      { "sTitle": "Name" }],


             "bProcessing": true,
             "bServerSide": true,

             "sAjaxSource": '@Url.Action("FetchData", "Home")',
             "sPaginationType": "full_numbers",

});

Can anyone please advice?

Answer 1

Quoted from the API datatable page - on the fnReloadAjax() bullet:

Note: To reload data when using server-side processing, just use the built-in API function fnDraw rather than this plug-in.

Thus, you'd probably better use fnDraw.

[EDIT] Actually, the order of your calls should be:

// you don't have to use $.json because you don't use the downloaded data
// first, ask the server to delete the data   
$.ajax({
   url: urlToDelete,
   success: function() {
       // if it worked, ask datatable to redraw the table with the new data
       $("#example").dataTable().fnDraw();
       // if this js function does anything useful (like deleting the row), then call it:
       Success();
   },
   error: function() {
       // display any error (like server couldn't be reached...), or at least try to log it
   }
});

Answer 2

I was able to solve this issue with much simple approach than provided in above answers.

Ajax call to delete data from backend

First of all delete the data from backend using normal ajax async call.

Delete from frontend datatable

Get the row TR which you want to delete and use the datatable function fnDeleteRow to delete this row. This will automatically refresh the table so you will not need any fnDraw or other stuff.

//in my case its delete button which was clicked 
//so I got its parents parent which is TR row
var row = $(this).parent().parent();


$('DATA TABLE SELECTOR').dataTable().fnDeleteRow(row);

And you are done.. :-)