JQueryスクロールでさらにテーブル行を取得

Question

私は、顧客の前回の購入を列挙したテーブルを持っています。以下のコードは、顧客が私たちから200〜300個のアイテムしか購入していない場合に効果的です。しかし、私たちから一週間に5,000アイテム以上を購入するディーラーがいると、非常に面倒です。必要なときにテーブルの下部に多くの行をロードする方法はありますか？ 10,000レコードをテーブルにフェッチして読み込むのは非常に遅いです。理想的な解決策は、最初に30行をフェッチしてテーブルにロードし、最後の4行目が画面に表示されたら、さらに30行をフェッチすることです。何かご意見は？ここでの結果のすべてをロードするために私の現在のコードです：

はJQuery：任意の提案は大歓迎されている

var data = JSON.parse(call.responseText); 
      if(data[0] === 'none') { $('#purchaseHistory').html('<center><b>There is no purchase history to show.</b></center>'); return; } 
      var purchases = data.length; 
      $('#purchaseHistory').empty(); 
      for(i = 0; i < purchases; i++) { 
       $('#purchaseHistory').append('<tr ondblclick="popup(\'order.php?order='+data[i]['ORDER']+'&cust='+CUSTOMER_ID+'\', \'Order #'+ data[i]['ORDER'] +'\', \'1150\', \'845\');"><td style="width: 60px;">'+ data[i]['ORDERNO'] +'</td><td style="width: 100px;">'+data[i]['ORDER_DATE'] +'</td><td style="width: 100px;">'+data[i]['PRODCODE']+'</td><td style="width: 170px;">'+ data[i]['ITEM'] +'</td><td style="width: 25px;">'+ data[i]['QUANTITY'] +'</td><td style="width: 120px;">'+ data[i]['STATUS'] +'</td><td style="width: 75px;">'+ data[i]['SHIP_DATE'] +'</td><td style="width: 60px;">---</td><td style="width: 70px;">'+ data[i]['AMOUNT'] +'</td><td style="width:85px;">---</td></tr>'); 
      } 

。あなたのウィンドウにスクロールするリスナーを追加

Answer 1

：

$(window).scroll(function() {}); 

これは、ユーザーがページのボタンの近くにあるときに知っているあなたを助けます。

あなたのバックエンドはページ単位でデータを取得できるはずです。チャンク単位でデータを取得できるようになります。ユーザーがページの一番下に到達したときに結果をテーブルに追加してAJAXリクエストを作成できます。

ここではどのように達成するかの例を示します。

https://jsfiddle.net/eojdzc3o/