X-Editable 和 Bootstrap 数据表

Question

我尝试在引导数据表中实现 x-editable 没有成功，原因是当我从 x 可编辑更新元素时​​，数据表无法识别这些更改。我尝试更新表，销毁它，隐藏标签，但主要问题似乎是数据表无法识别初始化后的任何更改。 我通过按钮单击添加行，当它们到达表格时，我在这些元素上运行 .editable 。它们变得可编辑，但数据表的排序和搜索不起作用..

谁能帮帮我？

Answer 1

问题在于，出于性能原因，Datatables 将表缓存到内存中，因此实际上 DOM 表与内存表不同。当你修改 DOM 时，它不会改变内存中的表。

因此，Datatables 创建了一个函数助手：invalidate()，您可以将其应用于一行 http://datatables.net/reference/api/row%28%29.invalidate%28%29（也有一个多行版本）。

或者您仍然可以使用 CPU 消耗较少的函数data()（推荐）。

我会做这样的事情：

$('.xeditable').on('save', function(e, params) {
    var $tr = $(e.target).closest('tr');
    var newValue = params.newValue;
    //If you didn't save the datatable into a var table, you need to call this line :
    //var table = $('#example').DataTable();
    table.row(tr).data(newValue);
    //Or table.row(tr).invalidate(); which should read from the DOM directly
});