从 DOM 刷新 jQuery DataTable - 没有 AJAX

Question

我有一个完全由服务器预填充的 HTML 表格；页面上的任何地方都没有 AJAX。

我有 javascript 代码，可以让我在这个表和另一个表之间移动行（开始是空的）。

数据集足够小，不需要 Ajax 分页，但足够大，DataTable 中的排序/过滤内容很有用。所以我把第一个表变成了一个DataTable。

问题：我移动到第二个表的行在我移动它们之后仍然受到数据表代码的影响；对第一个表的任何新搜索、排序或过滤都会清空第二个表。

所以我想做的是修改 DataTable 下的表，然后刷新它 - 让它重新分析 DOM 中存在的表并从中重建它的状态。最好不要丢失其当前的搜索字符串、排序顺序等。

我尝试使用 DataTable API 删除和添加行，但没有帮助 - 即使在删除和重绘之后，搜索已删除行的内容也会导致它重新出现。

任何帮助表示赞赏。

这是原始的行移动代码：

var top    = $('#top');
var bottom = $('#bottom');
$('body').on('click', 'input:checkbox', function(ev) {
  var box = $(ev.currentTarget);
  var tr = box.closest('tr');
  var table = tr.closest('table');

  var to;
  if (table.attr('id') == 'top' && checkbox.checked) {
    to = bottom;
  } else {
    to = top;
  }
  to.append(tr);
});

好的，我能够使用 DataTable API 让它工作。谢谢！

Answer 1

深入了解您的行移动代码将有助于正确回答您。也许您需要使用 $.clone() 和 $.remove() 来移动行 - 这应该从任何附加事件中清除行。

或者，您可以 .destroy() 您的数据表（请参阅http://datatables.net/reference/api/destroy()），移动该行然后再次对其进行初始化

[编辑：] 是的，您需要使用 Datatable API 来移动行。

那个库似乎很好地支持它：http://www.datatables.net/examples/api/add_row.html + http://datatables.net/reference/api/rows().remove()