Question

我在我的网站上使用了数据表。

现在每当我更新任何单个记录的任何数据时，我只需使用ajax更新该行数据，如：

HTML就像：

<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就像：

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

Ajax响应代码：

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

问题

但是当我使用datatable api检索数据时：

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

它返回旧数据。

那么如何准确更新数据表行。

Answer 1

当您更改单元格或整行的值时，总是使用API：

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

DataTables没有机会知道您对DOM进行了一些更改。并且DataTables无论如何都不能用于双向绑定，但本质上它本身就是一个DOM - ＆＃34;工厂＆＃34;根据基础数据集更新页面。

除此之外，您不应该插入原始HTML，而应该使用与初始化表格相同的格式。你是怎么做到的我们都不知道。如果您的表是DOM表，则可以将响应清理为值数组：

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

更新DataTables行数据

1 个答案: