X-Editable和Bootstrap数据表 [英] X-Editable and Bootstrap datatables

问题描述

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

I've tried with no success to implement x-editable in bootstrap datatables, the reason being when i update an element from x editable, the datatable fails to recognize those changes.. i've tried updating the table, destroying it, hidden tags, but the main problem seems to be that the datatables fails to recognize any change after the initialization.. I add the rows via button click, when they get to the table, i run .editable on those elements. they become editable but the sorting and search of the datatables doesnt work..

有人可以帮助我吗？

推荐答案

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

The problem is that for performance reasons, Datatables caches the table into memory so actually the DOM table is different from the in-memory table. And when you modify the DOM, it doesn't change the table in-memory.

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

Therefore, Datatables created a function helper : invalidate() that you can apply on a row http://datatables.net/reference/api/row%28%29.invalidate%28%29 (there is a multiple rows version too).

或者您仍然可以使用功能 data（）这是CPU占用（推荐）。

Or you can still use the function data() which is less CPU consuming (recommended).

我会这样做：

$('.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
});

这篇关于X-Editable和Bootstrap数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！