滚动加载更多SQL限制

时间:2015-07-02 10:55:16

标签: javascript php jquery sql ajax

所以我已经制作并制作了这个网站,但现在我需要在滚动上加载更多结果。这已被问到这一百万次,但我想知道是否有一种简单的方法适合我的构建。理想情况下,我想做一些限制,但我所看到的一切都是关于完全独立的页面。

页面示例 -

$sql = "SELECT * FROM `Products` ORDER BY id LIMIT 0,4 ";

echo    "<div class=\"full_container\">";
echo        "<div class=\"full\">";

if ($result = mysqli_query($con, $sql)) {

while ($row = mysqli_fetch_assoc($result)) {

echo            "<div class=\"item_frame\">";
echo                "<div class=\"item\">";
echo                    "<h5>".$row["Name"]."</h5>";
echo                "</div>"; #Item End#
echo            "</div>"; #Item_Frame End#

JS示例 -

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

///Where I would have the limit fix

}
});

这是否能够轻松切换到能够在滚动上加载更多内容还是我必须使用第二个php页面与ajax一起使用?

1 个答案:

答案 0 :(得分:2)

要获得更多信息,您可能需要通过ajax进行调用,然后在返回数据后使用javascript渲染新图像。您可以像对待常规分页一样处理此问题,只需记住您已经获得了多少结果并将其输入到您的限制中,这样就像

(function () {
  var page = 2,
      uri = 'moreImages.php';

  $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

      $.get (uri, {page: page}, function (data) {
        page ++;
        $('#container').append (data);
      });

    }
  });
}) ();

然后在您的PHP页面中,您只需根据您的分页规则计算出偏移量

$page = (int) @$_GET['page'] ?: 1;

$numItems = 4;
$start = ($page - 1) * $numItems;

$sql = "SELECT * FROM `Products` ORDER BY id LIMIT {$start}, {$numItems}";

几乎忘了: 在它们到达页面底部以加快速度之前,可能还需要稍微发送请求。确保在代码中设置一个标记,以标记您正在等待信息,并且仅在清除时请求更多信息,或者在滚动时始终发送请求。