Как перерисовать DataTable с новыми данными

Я уже несколько раз задал несколько вопросов об этой теме в stackoverflow, но все они используют старый dataTable. Я использую DataTable. Я заполнил свой DataTable, НЕ ИСПОЛЬЗУЯ серверную сторону, поэтому данные предварительно загружены (JSON) следующим образом:

datatable = $("#datatable").DataTable({
   data  : myData,
   moreoptions : moreoptions
});

У меня не было проблем с этим, DataTable загрузился просто отлично. Теперь я хочу повторно заполнить этот myData новыми загруженными мной данными. Как перезагрузить DataTable, чтобы отразить изменения?

Вот что я пробовал до сих пор:

$('#upload-new-data').on('click', function () {
   myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data.

   datatable.draw(); // Redraw the DataTable
});

Но это не работает. Я также пробовал это:

datatable = $("#datatable").DataTable({
   "data"  : myData,
   "drawCallback" : function () {
      myData = NewlyCreatedData;
   },
   "moreoptions" : moreoptions,
});

Затем при загрузке я просто вызываю триггер redraw:

$('#upload-new-data').on('click', function () {
   datatable.draw(); // Redraw the DataTable
});

Тем не менее это не работает.

Ответы

Ответ 1

Вы должны сначала очистить таблицу, а затем добавить новые данные, используя функцию row.add(). На последнем шаге отрегулируйте также размер столбца, чтобы таблица отображалась правильно.

$('#upload-new-data').on('click', function () {
   datatable.clear().draw();
   datatable.rows.add(NewlyCreatedData); // Add new data
   datatable.columns.adjust().draw(); // Redraw the DataTable
});

Также, если вы хотите найти сопоставление между старыми и новыми функциями API-функций с закладками this

Ответ 2

Принятый ответ дважды вызывает функцию draw. Я не понимаю, зачем это нужно. Фактически, если ваши новые данные имеют те же столбцы, что и старые данные, вы можете выполнить это в одной строке:

datatable.clear().rows.add(newData).draw();

Ответ 3

datatable.rows().iterator('row', function ( context, index ) {
    var data = this.row(index).data();
    var row = $(this.row(index).node());
    data[0] = 'new data';
    datatable.row(row).data(data).draw();
});

Ответ 4

Другая альтернатива -

dtColumns[index].visible = false/true;

Показать или скрыть любой столбец.

Ответ 5

У меня возникла та же проблема, и решение работало, но с некоторыми предупреждениями и предупреждениями, поэтому здесь полное решение, ключом было проверить существующий объект DataTable или нет, если да, просто очистите таблицу и добавьте jsonData, если не просто создайте новый.

            var table;
            if ($.fn.dataTable.isDataTable('#example')) {
                table = $('#example').DataTable();
                table.clear();
                table.rows.add(jsonData).draw();
            }
            else {
                table = $('#example').DataTable({
                    "data": jsonData,
                    "deferRender": true,
                    "pageLength": 25,
                    "retrieve": true,

Версии

JQuery: 3.3.1
DataTable: 1.10.20