jQuery datatable reDraw issue

Question

I'm new to the jQuery and ASP.Net MVC. I'm developing a mvc application which uses jQuery.

I have a problem in jQuery Datatables. After an update or a delete method we need to re-construct the Datatable again. I did it using jquery but I can't load the Datatable as it was earlier..Please help me on this problem.

  <table id="ViewxxTable" width="100%">    //Here is the table I want to reconstruct 
     <thead>
       <tr>
            <th>SN No</th>
            <th>Item code</th>
      </tr>
    </thead>
    <tbody>
<%     
    List<InSys.Models.xxDetailClass> xxdetailLst =     (List<InSys.Models.xxDetailClass>)Session["xxddetailLst"];
    foreach (InSys.Models.xxDetailClass grnd in xxdetailLst)
        {
%>
   <tr>
      <td><%= grnd.SnNo%></td>
      <td><%= grnd.ItemCode%></td>
      <td>
  </tr>

<%
       }
%>
  </tbody>
</table>

jquery

    oTable = $('#ViewxxTable').dataTable({
                 "bPaginate": false,
                 "bJQueryUI": true,
                 "bRetrieve": true,
                 "bDestroy": true,
                "sPaginationType": "full_numbers"
}); 

Answer 1

put your datatable intialization code inside a function and then call that function after re-construction of your table..like this-

function IntializeDatatable(tableId){
$('#'+tableId).dataTable();
}

inside delete. update method call it-

IntializeDatatable('ViewxxTable');

Answer 2

$(document).ready(function () {
    oTable = $("#tableId").dataTable({ 
        "bPaginate": true,
        "bJQueryUI": true,
        "bRetrieve": true,
        "sPaginationType": "full_numbers"
});

$("#tableId").dataTable().fnDestroy();    // destroy the old datatable
oTable = $("#tableId").dataTable({
    "bPaginate": true,
    "bJQueryUI": true,
    "bRetrieve": true,
    "sPaginationType": "full_numbers"