Як вручну оновити таблицю таблиць даних новими даними JSON

Я використовую таблиці даних jQuery плагіна і завантажую свої дані, які я завантажив у 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 в таблиці даних - не помиляйся!) і оновити таблицю цими даними. Як я можу це зробити за допомогою API таблиць даних? Документація дуже заплутана, і я не можу знайти рішення. Будь-яка допомога буде дуже вдячна. Дякую.

РІШЕННЯ: (Зверніть увагу: це рішення для версій 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 ()

Ви можете використовувати:

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

Jsfiddle

Оновлення. Так, поточна документація не настільки хороша, але якщо ви добре використовуєте старі версії, ви можете посилатися на застарілу документацію .

Вам потрібно знищити старий екземпляр таблиці даних, а потім повторно ініціалізувати таблицю даних

Спочатку перевірте, чи існує екземпляр таблиці даних за допомогою $ .fn.dataTable.isDataTable

якщо існує, то знищити його, а потім створити такий примірник, як цей

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

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

Ось рішення для застарілої таблиці даних 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);

У моєму випадку я не використовую вбудований ajax api для подачі Json до таблиці (це пов'язано з деяким форматуванням, яке було досить складно реалізувати всередині зворотного виклику рендерингу таблиці даних).

Моє рішення полягало у створенні змінної у зовнішній області функцій завантаження та функції, яка обробляє оновлення даних ( var table = nullнаприклад,).

Тоді я інстанціюю свою таблицю методом навантаження

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

і нарешті, у функції, яка обробляє оновлення, я викликаю метод clear () і знищення (), отримую дані в таблиці html і повторно створюю таблицю даних як таку:

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

Сподіваюсь, комусь це стане в нагоді!