javascript - 从 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() )，移动行然后再次初始化它

[编辑:]是的，您需要使用数据表 API 来移动行。

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