Refresh or reload datatable

Question

I am using jQuery Datatable, which includes personalized rendering for columns. Based on the values, I have to disable certain controls in it. I want to reload / update / restore my jquery datatable after posting. How can i do this?

**Controller:** [HttpPost] public JsonResult PostAction(MyMOdel model) { //save changes to DB return Json(new { Success = result, }); } public ActionResult MyAction() //grab records from DB and return JSON } **View:** @using (Ajax.BeginForm("PostAction", "ControllerName", null, new AjaxOptions { UpdateTargetId = "update-message", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "updateSuccess" }, new { @id = "myForm" } )) { <table id="myTbl" class="display"><tr><td>col1</td></tr></table> } <script type="text/javascript"> var oTable = $('#myTbl').dataTable({ "sAjaxSource": "/ControllerName/MyAction", <!-- more config --> function updateSuccess(data, status, xhr) { //refresh datatable; } </script> 

Update: **

I found the answer:

• clear table (fnClearTable)

• add new data to the table (fnAddData)

• redraw the table (fnDraw)

Answer 1

In case of an answer:

 clear the table ( fnClearTable ) add new data to the table ( fnAddData) redraw the table ( fnDraw ) 

Answer 2

First just enter the link using

 var oTable = $("#someTable").dataTable(); 

After that do whatever you want:

 Clear the table : oTable.fnClearTable(); Redraw the table : oTable.fnDraw(); Add new data to the table : oTable.fnAddData(); 

Answer 3

This worked for me:

 // Initially window.table = $('#TableID').dataTable({ ... }); // Later, when table needs to be refreshed window.table.fnDestroy(); // depending on the version, maybe just .destroy() instead of .fnDestroy(); 

Now just make the call you made Initially to reuse the table:

 window.table = $('#TableID').dataTable({ ... }); 

Answer 4

You simply call .dataTable() on the table again, without any arguments.

So, if you did something like this:

 $('#someTable').dataTable({ someAttribue: someValue }); 

Then you can do this to update it:

 $('#someTable').dataTable(); 

Do not call him arguments again; he doesn't like it.

Answer 5

 var oTable = $('#groups').dataTable(); oTable.fnClearTable(); oTable.fnDestroy(); groupsList(); 

Answer 6

For newer versions of Datatable, this will do the Job:

 var table = $('#yourDataTable').DataTable({...}); table.columns.adjust().draw(); 

In my case, I just needed to redraw it. But before redrawing, you can also clear and add new data.

Answer 7

Are you sure this is not what you are looking for:

 oTable.fnReloadAjax(); 

It worked for me. It reloads the grid using the current ajax url configuration.