dynamisch erstellte Table row/cells erweitern/reduzieren

[der henry]

Hallo,

ich habe eine Webseite auf der Betriebsmeldungen von Maschinen angezeigt werden.

Beim Start der Webseite lese ich mittels PHP die Betriebsmeldungen aus und übergebe diese mittels json statisch an die Webseite.

Das json ist ein Array, dass ich nach dem "onload" in einer Schleife auslese und damit Zeilen/Spalten in der dynamischen Tabelle auf der Webseite erzeuge ... soweit funktioniert mein Programm.

Wenn ich nun auf der Webseite bin und sich der Status der Betriebsmeldungen ändert, bekomme ich dies nicht mit ...

Meine Überlegung ... mittels fetch die Betriebsmeldungen zyklisch aktualisieren lassen.

d.h. ich bekomme alle 5 Sekunden ein neues Array das die aktuellen Betriebsmeldungen beinhaltet.

Dies können jetzt weniger, oder mehr Betriebsmeldungen sein, als aktuell auf der Webseite in der Tabelle stehen.

Meine Frage: Wie kann ich z.b. mit einem Vergleich

z.B. "neue arraygröße > rowAnzahl" => es sind jetzt mehr Betriebsmeldungen als Zeilen vorhanden => Zeilen dynamisch hinzufügen

oder

"neue arraygröße < rowAnzahl => es sind weniger Betriebsmeldungen als Zeilen vorhanden => dynamisch erzeugte Zeilen löschen

Wenn arraygröße == rowAnzahl => passt ... Array auf vorhandene Zeilen schreiben

Bin für jeden Tipp dankbar, eventuell ist auch die Überlegung ... es könnte anders/besser gelöst werden.

Vielen Dank !!

[Rolf B]

Hallo Henry,

die einfachste Lösung ist, die existierende Table wegzuschmeißen und die Anzeige neu aufzubauen. Je nach Umfang der Daten kann das flackern, oder auch nicht.

Hier kann man versuchen, mit "double buffering" zu arbeiten. D.h. die neue Version der Table außerhalb des DOM als neues <table>-Element aufbauen und die alte Version dann stumpf durch die neue replacen.

Nachteil: die Scrollposition kann verloren gehen. Ob das ein Nachteil ist, hängt davon ab, wie Du diese Anzeige benutzt, aber auf diesem Weg kannst Du relativ zügig und ohne viel zusätzlichen Code zu einer Lösung kommen.

Wenn das zu hässlich ist, können wir die Update-Idee vertiefen. Aber in dem Moment fassen wir das Thema "Datenabgleich" an, was für Frontender eigentlich ein Horror ist. Abgleichprogramme sind ein Erbe der Batch-Jobs aus den 60ern…

Rolf

[Gunnar Bittersmann]

@@Rolf B

die einfachste Lösung ist, die existierende Table wegzuschmeißen und die Anzeige neu aufzubauen.

Ganz Table? Nein! Ein von unbeugsamen Spaltenüberschriften bevölkerter THead hört nicht auf, dem Neuaufbau Widerstand zu leisten.

Je nach Umfang der Daten kann das flackern, oder auch nicht.

Ich würde eher sagen: je nach Implementierung. Wenn man Zeile für Zeile oder gar Zelle für Zelle ins DOM hängt, kann das flackern. Aber das muss man ja nicht tun.

[…] durch die neue replacen.

innerHTML?

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Ein von unbeugsamen Spaltenüberschriften bevölkerter THead hört nicht auf, dem Neuaufbau Widerstand zu leisten.

Lol. Auf den kommt's dann auch nicht mehr an.

innerHTML?

Kann man tun, aber dann muss der Browser das parsen und man muss ggf. fleißig für die Texte rumescapen. Aber ja, das kann ggf. schneller sein. Früher im IE zumindest. Wie es in heutigen Engines aussieht, hab ich lange nicht mehr getestet.

Rolf

[Gunnar Bittersmann]

@@Rolf B

man muss ggf. fleißig für die Texte rumescapen.

Warum sollte man das müssen? Ich hab mal in einem Fork die richtigen Apostrophe und Anführungszeichen durch falsche ersetzt. Funktioniert, sieht halt nur Scheiße aus.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Warum sollte man das müssen?

< > und & in innerHTML müssen escaped werden. Okay, > ggf. nicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

< > und & in innerHTML müssen escaped werden. Okay, > ggf. nicht.

Ah ja, ich sehe es: unsanitized.

Dieselben Daten sanitized sieht schon besser aus.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@der henry

Meine Frage: Wie kann ich z.b. mit einem Vergleich

z.B. "neue arraygröße > rowAnzahl" => es sind jetzt mehr Betriebsmeldungen als Zeilen vorhanden => Zeilen dynamisch hinzufügen

oder

"neue arraygröße < rowAnzahl => es sind weniger Betriebsmeldungen als Zeilen vorhanden => dynamisch erzeugte Zeilen löschen

Wenn arraygröße == rowAnzahl => passt ... Array auf vorhandene Zeilen schreiben

Vergiss die vorhandenen Zellen!

es könnte anders/besser gelöst werden.

Generiere einfach den ganzen Inhalt des tbody neu. Den weist du dann in einem Rutsch per innerHTML zu. Beispiel: Catchphrases.

Das ist einfacher und vermutlich auch performanter als sich von Zelle zu Zelle zu hangeln.

Mein Beispiel zeigt auch ein Problem des Ansatzes: Wenn alle 5 Sekunden die Anzeige wechselt, springen die Daten wild herum und man hat keinen Anhaltspunkt, was sich da geändert hat und was so geblieben ist. Man sollte die Daten wenigstens ordnen, wenn sie das noch nicht sind.

🖖 Live long and prosper

[Felix Riesterer]

Lieber henry,

haben die Meldungen PHP-seitig irgend ein Merkmal, mit dem man sie als alte Bekannte wieder erkennen kann? Das könnte z.B. ein Zeitstempel sein, oder eine ID.

Wenn Du ein solches Merkmal nutzen kannst, dann kannst Du es auch in den JSON-Daten übertragen. Die tr-Elemente, in welchen die Tabellenzellen zu dieser Meldung stehen, könnten dann dieses Merkmal als ID-Wert haben. Dieses Merkmal muss in seiner Darstellung gegebenenfalls so umgewandelt werden, dass es den Regeln für einen ID-Wert in HTML entspricht - eventuell als eine Art Hash.

function makeID (original) {
  return "ID_" + original.split("").map(
    c => c.charCodeAt(0).toString(16).padStart(2, "0")
  ).join("");
}
// Inspiration: https://stackoverflow.com/questions/36637146/encode-string-to-hex#answer-60435654

Unter dieser Voraussetzung kann man dann Tabellenzeilen aussortieren, wenn deren ID zu keinem Datensatz in den JSON-Daten passt. Ebenso kann man die Zellinhalte passend aktualisieren, weil man nun eine Zuordnung von JSON-Daten und angezeigten Daten herstellen kann.

Liebe Grüße

Felix Riesterer

[der henry]

Hallo,

ich habe es mit erstellen/löschen neuer/alter Einträge (rows) gelöst. Man sieht kein flackern und ich bin sehr zufrieden.

Vielen Dank an alle.