JQueryを使用してテーブルに何千もの行を動的にロードする

Question

私はCRMのフロントフェイスGUIを開発中です。私たちは顧客の階層構造を持っています。各顧客には、請求先のアドレスが多数あり、出荷先のアドレスが多く、各アカウントに関連付けられている連絡先も多数あります。私が抱えている問題は、一部の顧客が10,000以上の船積みをアカウントに関連付けていることです。これはすべてを一度に呼び出すときに問題になります。私はバックエンドを持っている、それは〜280ms（平均して）の船のデータをすべて取得します。私はテーブルにすべての情報を読み込むためにJavaScriptを使用しています。ここで私が現在やっているものです：

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('')); 

私は私のために仕様を構築する人々と話をしました、そして、彼らは一度に表示するためにそれらのすべてを必要とする、フィルタリングの可能性はありません。現在、すべてのデータがロードされてモーダルが開くまでに4秒かかります。

これを行う方法はありますか？

Answer 1

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

これは、ループ処理よりも優れたパフォーマンスを得るのに役立ちます。 もっと詳しく知りたい場合は、http://api.jquery.com/jquery.map/