it-swarm.com.de

Schneller Weg, um Tabellen dynamisch mit JSON-Daten in JavaScript zu füllen

Ich experimentiere mit jQuery, JSON usw. und bin auf folgende Aufgabe gestoßen. Ich habe ein Loader-Skript auf dem Server, das Tabellendaten im JSON-Format zurückgibt. Wenn ich die JSON-Daten erhalten habe, möchte ich meine Tabelle damit füllen. Ich verwende derzeit Code, der dem folgenden ähnelt (es gibt mehr Spalten und einige fortgeschrittenere Verarbeitung, aber Sie haben die Idee):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

Das funktioniert ziemlich gut. Aber sobald die Daten wachsen, wird es furchtbar langsam. Für einige hundert Datensätze dauert es bis zu 5 Sekunden (Firefox, IE), um die Tabelle zu erstellen, und das ist ein bisschen langsam. Wenn ich z. Erstellen Sie den gesamten HTML-Code auf dem Server und senden Sie ihn als Zeichenfolge, die in der Tabelle enthalten ist.

Gibt es einen schnelleren Weg, die Tabelle zu füllen?

HINWEIS: Ich weiß, was Paging ist, und ich werde es am Ende verwenden. Sagen Sie also bitte nicht "Wozu brauchen Sie eine so große Tabelle auf Ihrer Seite?". Bei dieser Frage geht es darum, wie Sie die Tabelle schnell ausfüllen können, unabhängig davon, wie viele Datensätze angezeigt werden. :)

17
Jan Zyka

Siehe meine Antwort zu einer früheren ähnlichen Abfrage mit Arrays und "join".

Verwenden Sie jQuery bis zum Schluss nicht, wenn Sie es nur einmal aufrufen. Schneiden Sie auch die String-Verkettung aus, indem Sie die Strings in einem Array speichern und die "join" -Methode verwenden, um den String auf einmal zu erstellen.

z.B.

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join('')); 
50
Neil

Versuchen Sie, das Hinzufügen der Tabelle zum ausgeführten DOM so spät wie möglich zu verschieben.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

Dies sollte ein Seitenlayout verhindern, bis die gesamte Tabelle fertig ist.

Wenn die Leistung ein echtes Problem ist, würde ich es auch vermeiden, Methoden aufzurufen, die Zeichenfolgen analysieren, wie alle diese $('<td>')-Aufrufe. Für ein einzelnes Element ist der Overhead davon wahrscheinlich ziemlich teuer (obwohl es sich lohnt, wenn Sie einen langen HTML-String haben).

Soweit ich es verstehe, sollte das Hinzufügen großer Zeichenfolgen mit .append() oder .html() ziemlich effizient sein. Was Sie verlieren, ist die Kontrolle, die Sie hätten, wenn Sie die Tabellenzellen mit .text() gefüllt hätten, um das Einfügen von HTML-Code zu vermeiden.

6
Alnitak

Es ist wahrscheinlich schneller, den HTML-Code für die gesamte Zeile zu erstellen und die Zeile zur Tabelle hinzuzufügen, anstatt jedes einzelne Element einzeln hinzuzufügen. Sie können das auch erweitern, um den gesamten HTML-Code in einer Zeichenfolge zu erstellen und dann alles auf einmal hinzuzufügen. Dies wäre noch schneller. In einer MVC-Umgebung würde ich wahrscheinlich eine Teilansicht (HTML) zurückgeben, die die Tabelle enthält, da die Trennung der Bedenken erhalten bleibt. Ich würde jedoch das Erstellen von HTML auf dem Server (in einem Controller) vermeiden, da dies bedeuten würde, dass Sie den Code ändern müssen, wenn Sie die Darstellung der Tabelle ändern möchten. Wenn Sie PHP oder eine andere Skriptsprache verwenden, filtern Sie sie entsprechend Ihrer Umgebung.

var html = '';
for (var key=0, size=data.length; key<size;key++) {

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);
0
tvanfosson