從服務器端使用js滾動延遲加載表

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，它實現了延遲加載。