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.
Antworten:
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:
Die moderne Definition von DataTables (Großbuchstaben):
var datatable = $( selector ).DataTable();
Die Legacy-Definition von DataTables (Kleinbuchstaben):
var datatable = $( selector ).dataTable().api();
Verwenden der
new
Syntax.var datatable = new $.fn.dataTable.Api( selector );
Laden Sie dann die Daten wie folgt:
API-Referenzen:
https://datatables.net/reference/api/clear ()
https://datatables.net/reference/api/rows.add ()
https://datatables.net/reference/api/draw ()
quelle
datatable.clear().rows.add(newDataArray).draw()
). Ab diesem Kommentar verwende ich Version 1.10.18Sie können verwenden:
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 .
quelle
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
quelle
Hier ist eine Lösung für Legacy-Daten 1.9.4
quelle
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
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:
Ich hoffe jemand findet das nützlich!
quelle