Javascript 使用js从服务器端滚动惰性加载表

我需要显示一个包含大量项目的表。 所以我想通过服务器端的延迟加载来实现这一点。 然后，当用户向下（或向上）滚动时，我调用服务器获取下一个/上一个定义的项目数，并显示它们而不是旧项目（或将它们添加到旧项目中）。 有没有一个简单的方法来实现这一点？ 是否有一些JavaScript库可以帮助我实现此功能？

---

任何帮助都将不胜感激。谢谢

检查此模板，按照注释进行操作，您将能够编写自己的代码。请记住，这只是一个例子

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

---

您可以使用

scrollHeight

、

clientHeight

和

scrollTop

来实现这一点，以检测滚动条何时接近底部区域，然后提取新项目：

这是一个例子（）：

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>  

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：我从复制/过去的代码源代码。

您可以使用我的库，并大致遵循，它实现了延迟加载。

链接已关闭，不再可访问可能的web存档链接：

$('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);  
}