Problem updating jquery dataTables plug-in with ASP.NET MVC

Question

Hello,

I need help in regards to updating a table rendered by jQuery data-tables plugin.

I have a view called Index.aspx in which I have a DIV, where the traditional table data is rendered. Something like:

<div id="students">
    <table ...>
         <thead>
           ...
         </thead>
         <tbody>
           ... (all the rows are statically rendered to DOM)
         </tbody>
    </table>

</div>

Then, I initialize the datatable as:

$(document).ready(function(){
    $("#students").dataTable();
});

The approach I have designed to use this along with CRUD operations is as follows:

All INSERT, UPDATE and REMOVE scenarios call an Action which returns a PartialView that updates the DIV.

However, even though I see the data is updated properly, I lose dataTable's functionalities like Paging, Sorting, etc. It doesn't even reflect the correct number of records in the datatable.

I understand this is happening because dataTable caches the data in its internal structure, so when I update the portion of the page using Ajax, dataTable is unaware of the data changes.

Has anyone come across this situation? What is a NICE and CLEAN approach to fix this problem?

Cheers,

Mosh

Answer 1

have you tried calling fnDraw after ajax?