Как обновить DataTables

Question

Я использую плагин DataTables, чтобы сделать мою таблицу интерактивной.

Таблица выводится PHP на странице.

Когда я добавляю запись в БД, я загружаю таблицу с помощью jQuery load (), но это нарушает DataTables.

Как мне обновить таблицу, сохранив DataTables без изменений?

Примечание. Я использую DOM в качестве источника данных, а не обработку на стороне сервера.

Answer 1

Если вы выполняете полную перезагрузку всей таблицы, оберните исходный код инициализации datatables в функцию. Вызовите эту функцию при загрузке страницы. При полной замене таблицы на ajax вам, вероятно, следует удалить родительский div таблицы, созданный плагином, в качестве оболочки для всех создаваемых им не DO-таблиц. Если идентификатор таблицы = "пример", идентификатор оболочки = "пример_wrapper".

Достаточно кода, скорее всего, поможет вам в этом. Есть простые способы обновить только строки, но так как запрос на полную перезагрузку таблицы, я следовал этому

function initDataTables(){
    $('#myTable').datatables({/* put all current options here*/})

}


/* within ready event of pageload */

$(function(){
    initDataTables();
    /* all other page load code*/

});

/* use $.get to reload table */

$.get( tableUpdateUrl, data, function( returnData){

    $('#myTable').parent().replaceWith(returnData);

    /* re-initalize plugin*/

    initDataTables();
}); 

Answer 2

Когда вы создаете таблицу данных, присвойте полученное значение переменной:

var table = $(".something").dataTable();

Когда вы создаете новый элемент, предположительно через AJAX, обязательно возвращайте свойства, которые должна отображать ваша таблица. Затем в вашей функции success вы можете использовать метод fnAddData, чтобы добавить новую строку в вашу таблицу. Этот метод принимает массив значений, первый идет в первом столбце, второй во втором и т. Д .:

success: function(response){
    table.fnAddData([
        response.id,
        response.name,
        response.description,
    ]);
}

Подробнее о методе fnAddData можно прочитать здесь .

Answer 3

Вы должны иметь возможность использовать плагин ajax. http://datatables.net/plug-ins/api