CODEWITHSUNDEEP
jquerydatatables
Er.KT
Er.KT

Reputation: 2860

update DataTables row data

I have used datatable for my website.

Now whenever I update any data for any single record I just update that row data using ajax like:

HTML is like:

<table class="datatable">
    <tr id="user_row_1">
        <td>Name 1</td>
        <td>Role 1</td>
        <td>XYZ 1</td>
    </tr>
    <tr id="user_row_2">
        <td>Name 2</td>
        <td>Role 2</td>
        <td>XYZ 2</td>
    </tr>
    <tr id="user_row_3">
        <td>Name 3</td>
        <td>Role 3</td>
        <td>XYZ 3</td>
    </tr>
</table>

Jquery is like:

oTable = $(".datatable").DataTable();
....
$("#user_row_3").html(response);

Ajax response code:

<td>Name 3 Updated</td>
<td>Role 3 Updated</td>
<td>XYZ 3 Updated</td>

Problem

but when I retrieve the data using datatable api like:

var table = $('#user-list').DataTable();
var rowData= table.row('#user_row_160').data();
$.each($(rowData),function(key,value){
    console.log(value["name"]); 
});

it returns the older data.

So how to update datatable row exactly.

Upvotes: 1

Views: 10001

Answers (1)

davidkonrad
davidkonrad

Reputation: 85598

You should always use the API, also when you change values for cells or entire rows :

table.row("#user_row_3").data(response).invalidate().draw()

DataTables have no chance to know that you have made some changes to the DOM. And DataTables does not work with two-way binding anyway, but is essentially itself a DOM-"factory" that updates the page according to a underlying set of data.

Besides that, you should never insert raw HTML, but data in the same format as you initialised the table. How you do that we dont know. If your table is a DOM table, you can sanitize response to be an array of values :

var d = $(response, 'td').map(function(i, td) {
  return td.textContent
})
table.row("#user_row_3").data(d).invalidate().draw()

Upvotes: 4

Related Questions