Przewijany leniwy stół ładujący od strony serwera z js

Question

Potrzebuję wyświetlić tabelę z ogromną liczbą elementów. Więc chcę to zaimplementować z leniwym ładowaniem po stronie serwera. Następnie, gdy użytkownik przewinie w dół (lub w górę), wzywam serwer, aby uzyskać następną/poprzednią określoną liczbę pozycji i wyświetlić je zamiast starych przedmiotów (lub dodać je do starych przedmiotów). Czy istnieje prosty sposób na wdrożenie tego? Czy istnieje biblioteka JavaScript, która może mi pomóc w implementacji tej funkcji? Każda pomoc zostanie doceniona. Dzięki

Answer 1

Sprawdź ten szablon, obserwuj komentarze i będziesz mógł napisać swój własny kod. Pamiętaj, że to tylko przykład.

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

Można to osiągnąć stosując scrollHeight, clientHeight i scrollTop, aby wykryć, gdy pasek przewijania jest w pobliżu dolnej części, a następnie pobrać nowe elementy waszym

To jest przykład (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: skopiować/Ostatni kod źródłowy z here.

Answer 3

Możesz użyć jQuery.isInView, mojej biblioteki i prawie podążać za usage example, która implementuje leniwe ładowanie.