Verwenden Sie JQuery, um Tausende von Zeilen dynamisch in Tabelle zu laden

Question

Ich arbeite an einer Front-GUI für ein CRM. Wir haben eine abgestufte Kundenstruktur. Jeder Kunde hat viele Adressen, für die er Rechnungen erstellt, viele Adressen, an die er versendet, und viele Kontakte, die mit jedem Konto verknüpft sind. Das Problem, das ich habe, ist, dass einige Kunden weit über 10.000 Ship-To's mit dem Konto verbunden sind. Dies wird zu einem Problem, wenn alle gleichzeitig aufgerufen werden. Ich habe das Backend gut, es bekommt alle Versanddaten in ~ 280ms (im Durchschnitt.) Ich benutze Javascript, um alle Informationen in die Tabelle zu laden. Hier ist, was ich tue momentan:

var r = new Array(); 
var j = -1, recordID; 
r[++j] = ''; 

    //Loop through the data and build an array. 
    for (i in data) { 
     var d = data[i]; 
      recordID = d.id; 
     r[++j] = '<tr>'; 
     r[++j] = '<td>'+ d['ADDRESS_LINE_1'] +'</td>'; 
     r[++j] = '</tr>'; 
    } 
    //The line below joins the array and appends it to the table. 
    $('#table').append(r.join('')); 

Ich habe mit den Leuten gesprochen, die die Spezifikationen für mich bauen, und sie alle von ihnen müssen auf einmal zeigen, gibt es keine Möglichkeit der Filterung. Momentan dauert es ~ 4s, bevor alle Daten geladen sind und das Modal geöffnet wird.

Gibt es einen schnelleren Weg, dies zu tun?

Answer 1

$.map(yourArrayVar, function(value, key) { 
    return '<TR><TD>'+value['ADDRESS_LINE_1']+'</TD></TR>'; 
}); 
$("#table").append(yourArrayVar.join('')); 

Dies könnte man als Looping in einer besseren Leistung helfen. Erfahren Sie mehr über es hier, http://api.jquery.com/jquery.map/