Tabellenerstellung mit jquery dauert zu lange

[Steel]

Hi!

Kurze Erklaerung zu Beginn:
Ich habe vorher noch nie mit jquery gearbeitet, aber da Visual Studio (2010) mir jquery mit in mein Projekt getan hat (v.1.4.1), dachte ich mir, dass es wirklich mal an der Zeit ist, sich damit zu beschaeftigen. Bisher laeuft das auch ganz gut und jquery hat mir schon einige Arbeit abgenommen. Jetzt bin iach auber auf ein Problem gestossen, zu dem ich auch nicht wirklich im Internet fuendig werde.

Aufgabenstellung:
Ich hab ein Flatfile (Semikolon separierte Daten, jede Reihe ein neuer Datensatz) dessen Daten von meiner kleinen Anwendung verarbeitet und dargestellt werden sollen. Es handelt sich dabei um eine Anzahl von Datensaetzen im Bereich von 1500 bis 2000 Zeilen mit je 20 bis 30 Spalten. Und hier kommt das Problem: Javascript braucht mit meinem bisherigen Ansatz zu lang, um die Tabelle zu erstellen. Der Browser (IE8) schmeisst nach einiger Zeit den Dialog, dass ein Script den Browser ausbremst. Klar. Kann ich sogar nachvollziehen.

Ich nutze im Moment Code wie diesen hier:

myRow[][] enthaelt Zeilen und Spalten des Flatfiles
#areaMenu ist ein select, dessen Auswahl dargestellt werden soll (sagen wir mal sowas ein Stadtname)
#tablebody ist natuerlich der body meiner Tabelle

for (var i = 0; i < myRow.length; i++) {  
    if ($("#areaMenu").val() == myRow[i][11]) {  
        $("#tablebody").append("<tr></tr>");  
  
        for (var x = 0; x < myRow[i].length; x++) {  
            $("#tablebody > tr:last").append("<td>" + myRow[i][x] + "</td>");  
        }  
    }  
  
}

Das funktioniert auch ganz gut, ist aber recht langwierig. So wie ich das verstehe wird ja auch jedes einzelne tr und td fuer sich ins Dom gehaengt. Nett, wenn man mal eine oder ein paar Zeilen manipuliert.

Normalerweise wuerde ich jetzt hingehen und erstmal die Tabelle basteln und dann ins Dom haengen. Und genau da haperts. Kann jquery das nicht? Ich bekomme beim Suchen immer nur aehnliche Loesungen wie meine. Im Moment wuerde ich einfach einen fetten String bauen, der das Markup des table bodies darstellt und den dann versuchen einzubauen. Aber ist das der beste Weg?

[ChrisB]

Hi,

Normalerweise wuerde ich jetzt hingehen und erstmal die Tabelle basteln und dann ins Dom haengen. Und genau da haperts. Kann jquery das nicht?

var myTable = $("<table/>");

MfG ChrisB

[Steel]

Hi!

var myTable = $("<table/>");

Oehm. Ja. Was soll ich sagen? Wald. Baeume. 1500 Zeilen: kein Problem.

Also:

var mytablebody = $("#tablebody");  
  
mytablebody.append("<tr></tr>");  
mylastrow = $(mytablebody).filter(:last);  
  
mylastrow.append("<td>" + "Danke fuer den Schubser!" + "</td>");

Langsam gewoehn ich mich an jquery, auch wenn vieles noch ungewohnt ist und ich viel rumprobieren muss.

[molily]

Hallo,

var mytablebody = $("#tablebody");

mytablebody.append("<tr></tr>");
mylastrow = $(mytablebody).filter(:last);

mylastrow.append("<td>" + "Danke fuer den Schubser!" + "</td>");

  
Das ist ein wenig von hinten durch die Brust ins Auge, also sehr ineffizient. Erst erzeugst du ein Element und hängst es ins DOM, dann suchst du es aufwändig wieder heraus.  
  
Übrigens wird `$(mytablebody).filter(:last)`{:.language-javascript} nur einen Syntaxfehler werfen, auch `$(mytablebody).filter(':last')`{:.language-javascript} wird nicht das korrekte tun. Wenn schon, dann `mytablebody.find('tr:last')`{:.language-javascript} (finde das letzte tr-Element im Table-Body).  
  
So geht es effizienter:  
  
~~~javascript
var tbody = $('#tablebody');  
var tr = $('<tr>'); // Erzeuge Element und speichere das jQuery-Objekt mit dem Element in einer Variable  
tr.append('<td>Inhalt</td>'); // Hänge Inhalt an. Wenn das Element noch nicht im DOM hängt, ist das viel performanter  
tr.appendTo(tbody); // Erst dann hänge da tr-Element ins DOM

Wenn du tausende tr-Elemente erzeugst, solltest du sie nicht einzeln ins DOM einhängen, sondern in einem Rutsch. Dazu kannst du ein neues tbody-Element erzeugen, an das du nach und nach die tr-Elemente appendest. Oder einen einfachen Array, in den du die tr-Elemente pusht, und den du am Ende an tbody.append(array) übergibst.

var elements = [];  
for (var i = 0, l = 1000; i < l; i++) {  
  var tr = $('<tr>').append('<td>…</td>');  
  elements.push(tr);  
}  
$('#tablebody').append(elements);

Mathias

[Steel]

Vielen Dank!
Ich wollte noch an dem Code feilen, aber er musste erstmal ueberhaupt funktionieren.

Thumbs up!

[molily]

Hallo,

Ich habe vorher noch nie mit jquery gearbeitet, aber da Visual Studio (2010) mir jquery mit in mein Projekt getan hat (v.1.4.1),

Eine dermaßen veraltete Version würde ich nicht verwenden. Aktuell ist Version 1.11.0 (mit IE-8-Unterstützung).

Normalerweise wuerde ich jetzt hingehen und erstmal die Tabelle basteln und dann ins Dom haengen.

So läuft es auch in jQuery bestenfalls!

Kann jquery das nicht?

Ganz im Gegenteil.

Wenn du jQuery verstehen willst, dann vergiss alles, was dir üblicherweise darüber erzählt wurde – wie etwa: Jede Zeile hat das Schema $('selektor').methode(…).

jQuery ist eine Bibliothek, dessen grundlegender Datentyp – man könnte auch sagen, deren einzige Klasse – eine Liste von Elementobjekten ist. Auf dieser Liste kann man Methoden aufrufen. Um den Kreis zur Objektorientierung zu schließen: Diese Methoden sind prototypisch vererbt sind, der Prototyp ist jQuery.prototype und der Konstruktor ist jQuery.

Das heißt, du kannst mit jQuery-Objekten alles tun, was du mit Elementlisten tun kannst, und mit den Elementen in diesen jQuery-Objekten alles tun, was du mit Elementknoten tun kannst.

Das Verpacken von Elementen in einen Listenobjekt erlaubt einem sehr effizient zu arbeiten. Es erlaubt einem, das Wissen vom Umgang mit Elementlisten und Elementknoten wiederzuverwenden und gleichzeitig von den jQuery-Methoden zur DOM-Manipulation, zum Bewegen im DOM-Baum und zum Suchen von Elementen Gebrauch zu machen.

Effizienten Umgang mit dem DOM kann jQuery nicht herbeizaubern. Wenn man jQuery falsch verwendet, kann jQuery das nicht automatisch erkennen und optimieren.

Im Moment wuerde ich einfach einen fetten String bauen, der das Markup des table bodies darstellt und den dann versuchen einzubauen.

Das kannst du auch machen, das ist vielleicht sogar performanter. Dazu brauchst du aber jQuery nicht.

Mathias

[molily]

jQuery ist eine Bibliothek, dessen grundlegender Datentyp – man könnte auch sagen, deren einzige Klasse

Genus, Genus… wer braucht schon Genus.

Mathias

[Steel]

Moinsen!

Erstmal Danke an euch. Eure Antworten haben mir echt weitergeholfen. Was ich auf die Schnelle im Netz gefunden habe war alles nicht halb so zielfuehrend wie 3 Antworten hier. Leider sehen Vorgesetzte es selten gern wenn man sich nen Tag nur mit Recherche zu einem Thema beschaeftigt, statt den Kram einfach irgendwie zu machen. :(

Ich habe vorher noch nie mit jquery gearbeitet, aber da Visual Studio (2010) mir jquery mit in mein Projekt getan hat (v.1.4.1),

Eine dermaßen veraltete Version würde ich nicht verwenden. Aktuell ist Version 1.11.0 (mit IE-8-Unterstützung).

War mir schon klar. Da muss ich mich aber erst informieren ob ich die verwenden darf... -.- *sigh* Bisher war jquery ueberhaupt kein Thema. Sonst haette ich mich wohl schonmal damit beschaeftigt. Wenn mir aber ein offiziell installiertes Produkt (ueber das ich bisher nicht verfugt habe) eine (alte) jquery Bibliothek mitliefert, dann seh ich das so, dass ich diese auch verwenden darf.

Es gibt so Augenblicke, da wuenscht man sich den Lottojackpot noch mehr als sonst...