CODEWITHSUNDEEP
jquerydatatables
Sandeep Thomas
Sandeep Thomas

Reputation: 4727

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

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

Upvotes: 3

Views: 7157

Answers (2)

ricks
ricks

Reputation: 3324

I was able to solve this like so

  this.data().fieldYouWantToModify = newValue;
  this.invalidate().draw();

Since you are not changing how the cell is rendered, you don't need to rerender.

I found the solution here

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85518

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/

Upvotes: 3

Related Questions