Sunucu tarafındaki kaydırılabilir yükleme tablosu js ile

Question

Çok sayıda öğe içeren bir tablo görüntülemem gerekiyor. Bu yüzden sunucu tarafında tembel yükleme ile uygulamak istiyorum. Kullanıcı aşağı kaydırıldığında (veya yukarıda), sonraki/önceki tanımlı öğelerin sayısını almak ve onları eski öğeler yerine görüntülemek için sunucuyu ararım (veya eski öğelere ekler). Bunu uygulamak için basit bir yolu var mı? Bu işlevselliği uygulamak için bana yardımcı olabilecek bazı JavaScript Kitaplığı var mı? Herhangi bir yardım takdir edilecektir. Thanks

Answer 1

Bu şablonu kontrol edin, yorumları takip edin ve kendi kodunuzu yazabilirsiniz. Unutmayın, sadece bir örnek.

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

Daha sonra yeni öğeler getir, kaydırma çubuğu alt alanı yakınında olduğunda algılamak için scrollHeight, clientHeight ve scrollTop kullanarak bunu başarabilirsiniz: (

Bu bir örnektir 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: Ben here den/geçmiş kod kaynağını kopyalayın.

Answer 3

jQuery.isInView, benim bir kitaplık kullanabilirsiniz ve hemen hemen tembel yükleme uygular usage example, izleyin.