Как вручную обновить таблицу datatables с новыми данными JSON

Я использую плагин jQuery datatables и загрузить мои данные, которые я загрузил в DOM в нижней части страницы и инициирует плагин таким образом:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

сейчас. после выполнения некоторых действий я хочу получить новые данные с помощью ajax (но не ajax option build in datatables - не поймите меня неправильно!) и обновить таблицу с этими данными. Как я могу это сделать с помощью API datatables? Документация очень запутанная, и я не могу найти решение. Любой помощи будет очень много оцененный. Спасибо.

5 63
jquery datatables jquery-datatables

5 ответов:

устранение: (обратите внимание: это решение для datatables версии 1.10.4 (на данный момент) не устаревшая версия).

уточнение на документация API (1.10.15), API можно получить тремя способами:

  1. современное определение DataTables (верхний случай верблюда):

    var datatable = $( selector ).DataTable();

  2. устаревшее определение таблиц данных (Нижний верблюд случае):

    var datatable = $( selector ).dataTable().api();

  3. С помощью new синтаксис.

    var datatable = new $.fn.dataTable.Api( selector );

затем загрузите данные следующим образом:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

ссылки на API:

https://datatables.net/reference/api/clear()

https://datatables.net/reference/api/rows.add()

https://datatables.net/reference/api/draw()

102

вы можете использовать:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

обновление. И да текущая документация не так хороша, но если вы в порядке, используя старые версии, вы можете ссылаться документов.

21

в моем случае я не использую встроенный AJAX api для подачи Json в таблицу (это связано с некоторым форматированием, которое было довольно сложно реализовать внутри обратного вызова рендеринга datatable).

мое решение состояло в том, чтобы создать переменную во внешней области функций onload и функцию, которая обрабатывает обновление данных (var table = null, например).

затем я создаю экземпляр моей таблицы в методе on load

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

и, наконец, в функцию, которая обрабатывает обновление, я вызываю метод clear () и destroy (), извлекаю данные в таблицу html и повторно создаю экземпляр datatable как таковой:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

Я надеюсь, что кто-то находит это полезным!

3

вот решение для устаревших datatable 1.9.4

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);
0

вам нужно уничтожить старый экземпляр таблицы данных, а затем повторно инициализировать таблицу данных

сначала проверьте, существует ли экземпляр таблицы данных с помощью $.сноска.объект DataTable.isDataTable

если существует, то уничтожить его, а затем создать новый экземпляр такой 

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });
0