wake-up-neo.net

Manuelles Aktualisieren der Datentabeltabelle mit neuen JSON-Daten

Ich benutze Plugin jQuery Datatables und lade meine Daten, die ich in DOM am unteren Seitenrand geladen habe, und initiiere das Plugin auf diese Weise:

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

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

Jetzt. Nachdem ich eine Aktion ausgeführt habe, möchte ich neue Daten mit ajax erhalten (aber nicht mit Ajax-Option in Datatables - versteh mich nicht falsch!) und die Tabelle mit diesen Daten aktualisieren. Wie kann ich das mit Hilfe von Datatables API machen? Die Dokumentation ist sehr verwirrend und ich kann keine Lösung finden. Jede Hilfe wird sehr geschätzt. Vielen Dank.

72
covfefe

LÖSUNG: (Hinweis: Diese Lösung ist für Datatables Version 1.10.4 (im Moment), nicht für Legacy-Versionen).

[~ # ~] Erläuterung [~ # ~] Gemäß API-Dokumentation (1.10.15) kann die API sein Zugriff auf drei Arten:

  1. Die moderne Definition von DataTables (Großbuchstaben):

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

  2. Die Legacy-Definition von DataTables (Kamel-Kleinbuchstaben):

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

  3. Verwenden der new -Syntax.

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

Dann lade die Daten wie folgt:

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

API-Referenzen:

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

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

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

151
covfefe

Sie können verwenden:

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

Jsfiddle

Aktualisieren. Und ja, die aktuelle Dokumentation ist nicht so gut, aber wenn Sie mit älteren Versionen zufrieden sind, können Sie veraltete Dokumentation verwenden.

24
Vladimirs

In meinem Fall verwende ich das eingebaute Ajax-API nicht, um Json an die Tabelle zu übergeben (dies ist auf einige Formatierungen zurückzuführen, deren Implementierung im Render-Callback des Datable relativ schwierig war).

Meine Lösung bestand darin, die Variable im äußeren Bereich der Onload-Funktionen und der Funktion, die die Datenaktualisierung ausführt (z. B. var table = null), zu erstellen.

Dann instanziiere ich meine Tabelle in der On-Load-Methode

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

und schließlich rufe ich in der Funktion, die die Aktualisierung durchführt, die clear () - und die destroy () - Methode auf, rufe die Daten in die html-Tabelle ab und instanziiert die Datentabelle als solche erneut:

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

Ich hoffe jemand findet das nützlich!

4
jorge cordero

Sie müssen die alte Datentabelleninstanz zerstören und die Datentabelle anschließend erneut initialisieren 

Überprüfen Sie zunächst, ob eine Datentabelleninstanz vorhanden ist, indem Sie $ .fn.dataTable.isDataTable verwenden. 

wenn es existiert, dann zerstöre es und erstelle so eine neue Instanz 

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

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

Hier ist die Lösung für veraltete datierbare 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
Vikas