jquery - 更新DataTables行数据

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>

问题

但是当我使用数据表 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 无论如何都不支持双向绑定(bind)，但本质上它本身就是一个 DOM“工厂”，根据一组底层数据更新页面。

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

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