Question

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

Answer 1

您可以使用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 2

检查此模板，按照注释操作，您就可以编写自己的代码了。请记住，这只是一个例子。

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 3

您可以使用jQuery.isInView，我的库，并且几乎遵循实现延迟加载的usage example。

服务器端的可滚动延迟加载表与js

3 个答案: