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

99

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.

Indy
źródło
Co powiesz na usunięcie istniejącej części tabeli i utworzenie nowej?
Reporter

Odpowiedzi:

178

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 ()

Indy
źródło
4
To było zbyt trudne do znalezienia, wielkie dzięki! Używanie tego do utrwalania danych między obiegami serwera.
Doug
A co z danymi w wersji 1.9.4, mam ten sam problem w tym
Hardik Masalawala
5
Chcę tylko dodać, że możesz również łączyć metody (tj datatable.clear().rows.add(newDataArray).draw().). Od tego komentarza używam wersji 1.10.18
Sal_Vader_808,
jak mogę dodać jedną kolumnę z kontrolką przycisku
ajinkya
31

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 .

Vladimirs
źródło
Tak, masz rację, ale używam najnowszej wersji danych. W każdym razie znalazłem rozwiązanie i zaktualizowałem moje pytanie. Dziękujemy za zainteresowanie :)
Indy
1
@CookieMan, usuń swoją zmianę i opublikuj ją jako odpowiedź. Następnie oznacz ją jako zaakceptowaną.
Reporter
to rozwiązanie nie aktualizuje sekcji paginacji
Alok Deshwal
To jest świetne. Dzięki
Chris,
8

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
    });
Om Sharma
źródło
5

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);
Vikas
źródło
Działa to dla najnowszej wersji (proszę wziąć pod uwagę datę komentarza). Dziękuję Vikas!
Telmo
To zadziałało dla mnie. Ale nie rozumiem, dlaczego mogę użyć tych wszystkich przykładów: var datatable = $ (selector) .DataTable (); var datatable = $ (selector) .dataTable (). api (); var datatable = new $ .fn.dataTable.Api (selektor); Ale podczas dodawania .row (). Add () nie działa.
Fernando Palma
4

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!

jorge cordero
źródło
2
Zniszczenie całego stołu podczas każdej podróży w obie strony jest dość kosztowne, a stan również jest stracony. Powinieneś rozważyć zaakceptowaną odpowiedź, jeśli zachowany jest stan tabeli.
nhaberl