jQuery dataTables not updates even after changing the data of each row

Question

I've a Table which uses JQUERY datatable plugin. The first column of the table is actually the serial number which am binding using the render option in columndef option and my table initilisation is as below.

      var myTable = $("#table_question").dataTable(
        {
            "columnDefs": [
            { "targets": 0, "render": 
function (data, type, row,meta) { return String.format("<h4>{0}</h4>",row[4] ) } },

            { "targets": [3, 4], "visible": false}],

            "lengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],

        });

And here is the HTML structure of my TR (Mine is an ASP.NET app so included the eval there)

<tr questionid='<%# Eval("questionid")%>' questiontype='<%# Eval("questiontype")%>'>
   <td class="col-md-1 col-xs-1 xol-sm-1">
   </td>
   <td class="col-md-7 col-sm-7 col-xs-7">
      <%# Eval("question")%>
   </td>
   <td class="col-md-3 col-sm-3 col-xs-3">
      <%# Eval("questionid")%>
   </td>
   <td>
      <%# Eval("questiontype") %>
   </td>
   <td> <%# Eval("questionsequence")%></td>
</tr>

Everything working fine. Serial number is showing fine. but when I delete a row I need to update the serial number. So I tried to iterate over the table and changed the Row data. But nothing seems to be reflecting on the table when I tried using the following way.

var table = $('#table_question').DataTable();
table.rows().every(function (rowIdx, tableLoop, rowLoop) {
     var row = this.data();
     row[0]=7
     row[4]=7;
});

table.draw(true);

here datatable data changes (I think), but its not getting reflect on the table

Answer 1

You forget to set the row data back, after you have edited the array :

this.data(row).draw();

this.data() just returns a "stupid" array, dataTables cannot be aware of changes to the array before it is reinserted.

your code in action -> http://jsfiddle.net/cfqytLso/