时间戳

首页 > 解决方案 > DataTables - 内容更新后排序不起作用

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

问题描述

我正在使用 DataTables（版本 1.10.18），我正在通过 jQuery 更新行及其内容。

我的表使用以下代码初始化：

$(".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 服务返回的一些数据）。最后，我使用以下代码更新表格内容：

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>";

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

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

有没有办法来解决这个问题？

标签： javascriptjquerydatatablesdatatables-1.10

解决方案

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

推荐阅读