滚动时自动加载TR

时间:2013-03-04 08:01:03

标签: javascript jquery

请通过实时编辑获得大约5000行数据...
我希望能够显示前200行,然后在用户向下滚动页面时显示接下来的200行...并且可能隐藏前200行...
在stackoverflow上进行了几次搜索之后..我找到了this代码,但似乎没有理解它

    <table id="loadingtable" cellpadding="0" border="1" cellspacing="3" align="center" width="80%">
    <?php
    function createtr($value, $stop)
    {
        while($value <= $stop){
            echo'<tr>';
                echo '<td>';
                    echo "cell {$value}";
                echo '</td>';
            echo '</tr>';
            $value++;
        }
    }

    createtr(1, 5000);
    ?>  
    </table>

这是Jquery

       $("#loadingtable tr").slice(100).hide();

        var mincount = 100;
        var maxcount = 100; 

        $(window).scroll(function() 
        {
            if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                    $("#loadingtable tr").slice(mincount,maxcount).fadeIn(800);
            mincount = mincount+100;
            maxcount = maxcount+100

        }
    }); 

守则不适用于...... 请帮忙 很多人.. ..

1 个答案:

答案 0 :(得分:2)

$("#loadingtable tr").slice(100).hide();

    var mincount = 0;
    var maxcount = 100; 

    $(window).scroll(function() 
    {
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
            $("#loadingtable tr").slice(mincount,maxcount).fadeOut(800);
            mincount = mincount+100;
            maxcount = maxcount+100;
            $("#loadingtable tr").slice(mincount,maxcount).fadeIn(800);

    }
if($(window).scrollTop() <= 200) {
        $("#loadingtable tr").slice(mincount,maxcount).fadeOut(800);
        mincount = mincount-100;
        maxcount = maxcount-100;
        $("#loadingtable tr").slice(mincount,maxcount).fadeIn(800);

}
}); 

当用户滚动到页面底部时,这将加载接下来的100行 - 400个像素。要隐藏上面的行,你需要首先添加一个类似的函数,以便在他开始向上滚动然后使用FadeOut时取消隐藏

您需要添加边框条件检查(mincount&lt; 0和maxcount&gt; 5000)