DataTables

Question

我正在使用 DataTables（版本 1.10.18），我正在通过 jQuery.

更新行及其内容

我的 table 使用此代码初始化：

$(".summary").append(tableContent);
var otable = $('.summary').DataTable({
initComplete: function () {
this.api().columns([0, 1, 2, 3]).every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
  .appendTo($(column.footer()).empty())
  .on('change', function () {
    var val = $.fn.dataTable.util.escapeRegex(
    $(this).val()
   );
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
},
 "pageLength": records_per_page,
 "language": {
 "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
 },
 "order": [[0, 'desc']],
 "ordering": true,
 "scrollX": true,
 "scrollY":"50vh",
 "searching":false,
 "info":false,
 "paging": false
 });

然后我有一个在 SharePoint 列表中搜索的输入字段（通过 Rest API）。因此，我进行了 AJAX 调用，从 SharePoint Web 服务获得响应，并使用新数据准备 HTML 代码（需要修改从 Web 服务返回的一些数据）。最后，我使用此代码更新 table 内容：

var otable = $('.summary).DataTable();
otable.clear().draw();
$(".dataTables_scrollBody>.summary").append(newContent);
otable.rows().invalidate().draw();

newContent 类似于：

newContent = "<tbody><tr><td>content</td><td>content</td></tr></tbody>";

内容正在正确更新，排序箭头在 table header 中可见，它们也在更改自己的活动状态（desc 或 asc），但内容未排序。

我尝试了很多在网上找到的解决方案，但没有一个适合我。在内容更新部分，我还使用 .append() 方法添加行。

有办法解决这个问题吗？

Answer 1

我建议，您应该使用数据表 api 公开的 https://datatables.net/reference/api/row.add() 添加方法，而不是附加行。这将自动将所有初始设置应用于新添加的行。

DataTables - 内容更新后排序不起作用

DataTables - Sorting not working after content update

javascript

jquery

datatables-1.10