Scrollable lazy loading table from server side with js

Question

I need to display a table with a huge number of items. So I want to implement that with lazy loading from server side. Then when the user scroll down (or up), I call the server to get the next/previous defined number of items and display them instead of the old items (or add them to the old items). Is there a simple way to implement that ? Is there some JavaScript Library that can help me to implement this functionality ? Any help will be appreciated. Thanks

Answer 1

You can achieve this using scrollHeight, clientHeight and scrollTop, to detect when scroll bar is near the bottom area, then you fetch your new items:

This is an example (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: I copy/past code source from here.

Answer 2

Check this template, follow the comments and you will be able to write your own code. Please remember, that it is only an example.

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();