Ich lade Daten mit ajax und erzeuge Spaltennamen dynamisch in meiner DataTable. Meine DataTable hat eine unterschiedliche Anzahl von Spalten, abhängig von der Auswahl durch den Benutzer. (Es gibt eine Dropdown-Liste).
Beispielsweise gibt es in der Dropdown-Liste 2 Optionen als Südprovinz und Nordprovinz . Die Tabelle Südprovinz hat 4 Spalten und die Tabelle Nordprovinz hat 6 Spalten.
Szenario 1
Erster Benutzer wählen Südprovinz mit vier Spalten. Dann erzeugt es Tabelle ohne keine Fehler, aber danach, wenn Benutzer Northern Province wählen, die 6 Spalten hat, Tabelle nicht generiert und js Console Print Fehler wie unten.
Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3828
Szenario 2
Erster Benutzer: Wählen Sie Nordprovinz mit 6 Spalten. Dann erzeugt es Tabelle ohne keine Fehler, aber danach, wenn Benutzer Südprovinz wählen, die 4 Spalten hat, Tabelle nicht generiert und js Console-Druckfehler wie folgt.
Uncaught TypeError: Cannot read property 'mData' of undefined jquery.dataTables.js:6122
Wenn jedoch beide Tabellen die gleiche Anzahl an Spalten haben, werden beide Tabellen ohne Fehler generiert.
Wie kann ich das lösen?
Hier ist der JS-Code
%Vor%Ich denke, der sicherste Weg besteht darin, die Tabelle vollständig zu entfernen und sie dann erneut in das DOM einzufügen, bevor sie neu initialisiert wird. Es scheint mir, dass dataTables nicht alle generierten Inhalte vollständig entfernt, weshalb der Fehler (aus verschiedenen Gründen) auftritt. In der Theorie sollte es mehr oder weniger wie oben funktionieren, tut es aber nicht. Betrachten Sie diese Lösung:
[vollständige Quelle im Demo-Link unten]
%Vor% Das funktioniert. Siehe Demo - & gt; Ссылка
Grundsätzlich ist es das gleiche wie in OP, aber anstatt verschiedene Funktionen für verschiedene Provinzen zu haben, habe ich verschiedene aoColumns für verschiedene Provinzen und so weiter gemacht. Und anstatt sich auf bDestroy zu verlassen, entferne ich die gesamte <table> mit dataTable.fnDestroy(true) (sowohl DOM und als auch dataTables-Injektionen) und fügt dann das <table> -Kelettel vor der erneuten Initialisierung der dataTable ein.
Ich weiß nicht, ob das an die Bedürfnisse von OP angepasst werden kann, aber so würde ich es machen. Es ist flexibler für zukünftige Änderungen, und die aoColumns -Objekte können automatisch aus einem Skript generiert oder vom Server von AJAX erzeugt werden (wenn Sie zum Beispiel unterschiedliche Titel für verschiedene Sprachen haben möchten). "Gürtel und Hosenträger":)
Ich hatte das gleiche Problem, wenn meine aktualisierten Daten eine andere Anzahl von Spalten aufwiesen als die vorherigen Daten. Das Rezept ist wirklich einfach! Im Szenario bei einer Änderung der Spaltenanzahl funktioniert Destroy function in Verbindung mit $("#datatable").empty(); . Bevor Sie also Daten erneut laden, würde Ihr Code folgende Zeilen enthalten:
Insgesamt könnte Ihr Code so aussehen:
%Vor%Tags und Links javascript jquery ajax datatables