Jak ręcznie zaktualizować tabelę danych o nowe dane JSON

Używam pluginów danych jQuery i ładuję swoje dane, które załadowałem do DOM na dole strony i inicjuję wtyczkę w ten sposób:

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

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

Teraz. po wykonaniu jakiejś akcji chcę pobrać nowe dane używając Ajax (ale nie opcji Ajax wbudowanej w datatables - nie zrozumcie mnie źle!) i zaktualizować tabelę tymi danymi. Jak mogę to zrobić za pomocą interfejsu API danych? Dokumentacja jest bardzo zagmatwana i nie mogę znaleźć rozwiązania. Każda pomoc będzie bardzo mile widziana. Dzięki.

ROZWIĄZANIE: (Uwaga: to rozwiązanie dotyczy plików danych w wersji 1.10.4 (w tej chwili), a nie starszej wersji).

WYJAŚNIENIE Zgodnie z dokumentacją API (1.10.15), dostęp do API można uzyskać na trzy sposoby:

1. Nowoczesna definicja DataTables (wielkie litery):

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

2. Starsza definicja DataTables (małe litery wielbłąda):

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

3. Korzystanie ze newskładni.

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

Następnie załaduj dane w następujący sposób:

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

Użyj, draw(false)aby pozostać na tej samej stronie po aktualizacji danych.

Referencje API:

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

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

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

Możesz użyć:

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

Jsfiddle

Aktualizacja. Obecna dokumentacja nie jest tak dobra, ale jeśli możesz używać starszych wersji, możesz odwołać się do starszej dokumentacji .

Musisz zniszczyć starą instancję tabeli danych, a następnie ponownie zainicjować tabelę danych

Najpierw sprawdź, czy istnieje instancja tabeli danych, używając $ .fn.dataTable.isDataTable

jeśli istnieje, zniszcz go, a następnie utwórz nową instancję, taką jak ta

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

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

Oto rozwiązanie dla starszych 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);

W moim przypadku nie używam wbudowanego interfejsu API Ajax do przesyłania Json do tabeli (jest to spowodowane pewnym formatowaniem, które było raczej trudne do zaimplementowania w wywołaniu zwrotnym renderowania datatable).

Moim rozwiązaniem było utworzenie zmiennej w zewnętrznym zakresie funkcji onload oraz funkcji obsługującej odświeżanie danych ( var table = nullna przykład).

Następnie tworzę wystąpienie mojej tabeli w metodzie on load

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

i na koniec, w funkcji obsługującej refresh, wywołuję metodę clear () i destru (), pobieram dane do tabeli html i ponownie tworzę instancję datatable, na przykład:

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

Mam nadzieję, że ktoś uzna to za przydatne!