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

【问题标题】：DataTables - Sorting not working after content updateDataTables - 内容更新后排序不起作用
【发布时间】：2019-09-06 15:05:51
【问题描述】：

我正在使用 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() 方法添加行。

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

【问题讨论】：

除非您能够提供足够的信息让我们能够重现该行为，否则答案将只是在黑暗中随机刺伤。
@TravisActon 问题更新了更多细节。

标签： javascript jquery datatables datatables-1.10

【解决方案1】：

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

【讨论】：

是否可以将 row.add() 与我已经准备好的 HTML 代码一起使用？我的意思是做类似 table.row.add(" content content ").draw());
我认为您展示的方式是不可能的。您的内容应该是一个数组，其中每个索引将代表各自的列。假设您有 4 列，那么您的行添加功能应该是 table.row.add( [ 1, 2, 3, 4 ] ).draw();
如果您认为在您的情况下使用 add 开销更大，那么您可以在原始代码中添加行后再次重新初始化表。写完追加后，只需添加 $('.summary').DataTable() 它应该可以工作。
我尝试在追加后重新初始化 DataTable，但排序不起作用。没有错误，内容显示正确，但排序仍然无法正常工作。
我可以建议的最后一件事是在附加行 $('.summary').DataTable().draw() 后重绘表格。如果这不起作用，那么不幸的是你将不得不使用添加功能