サーバー側からスクロール可能なレイジーローディングテーブル

Question

膨大な数のアイテムを持つテーブルを表示する必要があります。 私はそれをサーバー側から遅延読み込みで実装したいと考えています。 次に、ユーザーがスクロール（または上）すると、サーバーに電話して、次の/前に定義された数の項目を取得し、古い項目の代わりに表示します（または古い項目に追加します）。 これを実装する簡単な方法はありますか？ この機能を実装するのに役立つJavaScriptライブラリがありますか？ 助けていただければ幸いです。ありがとう

Answer 1

このテンプレートをチェックし、コメントに従うとあなた自身のコードを書くことができます。これは単なる例であることを覚えておいてください。

var $win = $(window), 
    $table = $('.table'), // your table 
    lazyPoint = 0, // point to call next ajax 
    offset = 30, // number of last table row 
    count = 30, // number of rows to load with one request 
    loading = false; // flag to prevent more than 1 loading at a time 

// this function will calc next Y coordinate 
// then you reach it, use ajax to get some new table data 
function calcLazyPoint() { 
    var top = $table.offset().top; 
    var height = $table.outerHeight(); 
    lazyPoint = top + height; 
} 

// add loaded data to table 
function addToTable (data) { 
    var html; 

    // use some template engine here, like this: http://handlebarsjs.com/ 
    // in this function you should convert raw data 
    // to HTML, which you will append to table 

    $table.append(html); // append data to table 
    offset += 30; // increase your offset 
    loading = false; // allow to load next data portions 

    calcLazyPoint(); // calc next lazy point 
} 

// Function with ajax request 
// it will ask server for new data 
// using your offset and count 
function getTableData() { 
    $.ajax({ 
     data: { 
      offset: offset, 
      count: count 
     }, 
     success: addToTable 
    }); 
} 

$win.on("scroll", function() { 
    var top = $win.scrollTop(); // get scrollTop 
    var height = $win.innerHeight(); // viewport height 
    var scrollPoint = top + height; 

    if (scrollPoint > lazyPoint && !loading) { 
     getTableData(); // ajax request 
     loading = true; // prevent more than 1 request 
    } 
}); 

// fist start 
calcLazyPoint(); 

Answer 2

あなたは、あなたがあなたの新しいアイテムの取得、スクロールバーが底面積の近くにあるときを検出するためにscrollHeight、clientHeightとscrollTopを使用して、これを達成することができます（

これは一例ですがthe demo）：

HTML

<div id="container"> 
    <div id="scrollbox" > 
     <div id="content" > 
      <p>Lorem ipsum dolor sit amet</p> 
      <p>Ipsum lorem dolor amet sit</p> 
      <p>Dolor lorem ipsum amet tis</p> 
      <p>Lorem ipsum dolor sit amet</p> 
      <p>Ipsum lorem dolor amet sit</p> 
      <p>Dolor lorem ipsum amet tis</p> 
      <p>Lorem ipsum dolor sit amet</p> 
      <p>Ipsum lorem dolor amet sit</p> 
      <p>Dolor lorem ipsum amet tis</p> 
     </div> 
    </div> 
    <p><span id="status" ></span></p> 
</div> 

CSS

#container{ 
    width:400px; 
    margin:0px auto; 
    padding:40px 0; 
} 
#scrollbox{ 
    width:400px; 
    height:300px;  
    overflow:auto; overflow-x:hidden; 
} 
#container > p{ 
    background:#eee; 
    color:#666; 
    font-family:Arial, sans-serif; font-size:0.75em; 
    padding:5px; margin:0; 
    text-align:rightright; 
} 

はJavaScript

$('document').ready(function(){ 
    updatestatus(); 
    scrollalert(); 
}); 
function updatestatus(){ 
    //Show number of loaded items 
    var totalItems=$('#content p').length; 
    $('#status').text('Loaded '+totalItems+' Items'); 
} 
function scrollalert(){ 
    var scrolltop=$('#scrollbox').attr('scrollTop'); 
    var scrollheight=$('#scrollbox').attr('scrollHeight'); 
    var windowheight=$('#scrollbox').attr('clientHeight'); 
    var scrolloffset=20; 
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) 
    { 
     //fetch new items 
     $('#status').text('Loading more items...'); 
     $.get('new-items.html', '', function(newitems){ 
      $('#content').append(newitems); 
      updatestatus(); 
     }); 
    } 
    setTimeout('scrollalert();', 1500); 
} 

PS：私はhereから/過去のコードソースをコピーします。

Answer 3

jQuery.isInView（私のライブラリ）を使用して、遅延ロードを実装するusage exampleにほぼ従います。