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 ch

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
});