X-Editable and Bootstrap datatables

Question

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..

Can anyone help me?

Answer 1

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.

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).

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

I would do something like this :

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