jquery - 如何用mysql实现无限滚动？

Question

我在网上搜索了很多次，但没有找到解决问题的简单方法。我有一个mysql表，里面有很多记录。我有这个 jQuery 代码:

$(document).ready(function(){
    var screenHeight = $(window).height();
    $(window).scroll(function(){
        var scroll = $(this).scrollTop();
        var divHeight = $('#data').height();
        var totalHeight = screenHeight + scroll; 
        var left = divHeight - totalHeight;
        if(left < 10)
            $('#loader').html('<img src="images/loading.gif"> Loading');
            //There must be a function
    });
});

如何让原来页面显示10条记录，向下滚动时又显示10条记录？

我的英语很差，抱歉翻译。

Answer 1

您想要做的是在 JavaScript 中添加一个计数器变量，用于保存当前页面上显示的项目数。对于您的示例，此计数器将等于 10(页面上有 10 个初始项目)。

当您向服务器发送 AJAX 请求时，您将包含此计数器变量 - 它将在 SQL 查询中使用以跳过您已显示的项目:

$query = "SELECT * FROM items LIMIT 5, $counter ORDER BY create_time"

这将返回 5 个项目，但跳过前 $counter 行(前 10 行)。

当 JavaScript 收到响应时，您将计算您获得的项目数量并将该数字添加到您的计数器中。你的计数器现在应该是 10 + 5.. 15...

下次您向服务器请求更多内容时，它将跳过 15 个项目，只为您提供接下来的 5 个项目。