So aktualisieren Sie die Datentabellentabelle manuell mit neuen JSON-Daten

98

Ich verwende Plugin- jQuery-Datentabellen und lade meine Daten, die ich in DOM am Ende der Seite geladen habe, und initiiere das Plugin auf folgende 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 abrufen (aber keine Ajax-Option, die Datentabellen enthält - verstehen Sie mich nicht falsch!) und die Tabelle mit diesen Daten aktualisieren. Wie kann ich das mit der Datatables API machen? Die Dokumentation ist sehr verwirrend und ich kann keine Lösung finden. Jede Hilfe wird sehr geschätzt. Vielen Dank.

Indy
quelle
Wie wäre es, den vorhandenen Tabellenkörper zu löschen und neu zu erstellen?
Reporter

Antworten:

177

LÖSUNG: (Hinweis: Diese Lösung ist für Datatables Version 1.10.4 (derzeit) keine Legacy-Version.)

KLARIFIKATION Gemäß der API-Dokumentation (1.10.15) kann auf drei Arten auf die API zugegriffen werden:

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

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

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

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

  3. Verwenden der newSyntax.

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

Laden Sie dann 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 ()

Indy
quelle
4
Das war zu schwer zu finden, vielen Dank! Verwenden Sie diese Option, um die Datentabelle zwischen Server-Roundtrips beizubehalten.
Doug
Was über Datentabellen Version 1.9.4 Ich bin vor demselben Problem, dass
Hardik Masalawala
4
Ich möchte nur hinzufügen, dass Sie auch die Methoden verketten können (dh datatable.clear().rows.add(newDataArray).draw()). Ab diesem Kommentar verwende ich Version 1.10.18
Sal_Vader_808
Wie kann ich eine Spalte mit der Schaltflächensteuerung hinzufügen
Ajinkya
30

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 einverstanden sind, können Sie auf ältere Dokumentationen verweisen .

Vladimirs
quelle
Ja, Sie haben Recht, aber ich verwende die neueste Version von Datentabellen. Wie auch immer, ich habe eine Lösung gefunden und meine Frage aktualisiert. Vielen Dank für Ihr Interesse :)
Indy
1
@CookieMan, bitte entfernen Sie Ihre Bearbeitung und veröffentlichen Sie sie als Antwort. Danach markieren Sie es als akzeptiert.
Reporter
Diese Lösung aktualisiert den Paginierungsabschnitt nicht
Alok Deshwal
8

Sie müssen die alte Datentabelleninstanz zerstören und dann die Datentabelle neu initialisieren

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

Wenn vorhanden, zerstören Sie es und erstellen Sie eine neue Instanz wie diese

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

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

Hier ist eine Lösung für Legacy-Daten 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
quelle
Dies funktioniert für die aktuelle Version (bitte beachten Sie das Datum des Kommentars). Danke Vikas!
Telmo
Das hat bei mir funktioniert. Aber ich verstehe nicht, warum ich all diese Beispiele verwenden kann: var datatable = $ (Selektor) .DataTable (); var datatable = $ (Selektor) .dataTable (). api (); var datatable = new $ .fn.dataTable.Api (Selektor); Aber beim Hinzufügen von .row (). Add () funktioniert nicht.
Fernando Palma
4

In meinem Fall verwende ich die integrierte Ajax-API nicht, um Json in die Tabelle einzuspeisen (dies ist auf einige Formatierungen zurückzuführen, die im Render-Rückruf der Datentabelle nur schwer zu implementieren waren).

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

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 behandelt, die Methode clear () und destroy () auf, rufe die Daten in die HTML-Tabelle ab und instanziiere 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!

Jorge Cordero
quelle
2
Die Zerstörung des gesamten Tisches bei jeder Hin- und Rückfahrt ist ziemlich teuer und der Staat geht ebenfalls verloren. Sie sollten die akzeptierte Antwort berücksichtigen, bei der der Status der Tabelle beibehalten wird.
Nhaberl