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

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

have you tried calling fnDraw after ajax?

Try something like this in your code where you need to refresh your table:

oCache.iCacheLower = -1;
oTable.fnDraw();