So aktualisieren Sie die Datentabellentabelle manuell mit neuen JSON-Daten

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.

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

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 .

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
    });

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

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!