如何对 Infinite Scroll 的查询结果进行分页？

Posted 2023-02-24

技术标签:

【中文标题】如何对 Infinite Scroll 的查询结果进行分页？【英文标题】：How to paginate query results for Infinite Scroll? 【发布时间】：2012-06-30 11:38:39 【问题描述】：

我有一个使用 2 个 php 文件和一个 mysql 数据库的示例页面，我正在尝试在其上使用 jQuery 无限滚动。如何从数据库加载下一组数据？例如，我的图片数据库中有 100 条记录，我想显示 20 条，然后滚动后显示下 20 条。

这是我目前的核心：

index.php

<?php
ob_start();
require_once('images.html'); 
ob_end_flush();
?>

images.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title> trata tata</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <link rel="stylesheet" href="./css/style.css" />
   <!-- scripts at bottom of page -->
</head>
<body class="demos ">
  <nav id="site-nav">
    <h1><a href="./index.html">ole tu jest HOME</a></h1>
    <h2>Menu 1</h2>
    <ul class="docs-list">
        <li><a href="../docs/intro.html">11111111</a>
    </ul>
    <h2>Menu 2</h2>
    <ul class="demos-list">
        <li><a href="../demos/basic-single-column.html">222222222</a>
        <li class="current"><a href="#content">3333333333</a></li>
    </ul>
  </nav> <!-- #site-nav -->

  <section id="content">
     <h1>cos tam ....</h1>
     <div id="container" class="clearfix">
     <?php
     // Make a MySQL Connection
     mysql_connect("localhost", "root", "") or die(mysql_error());
     mysql_select_db("test") or die(mysql_error());

     // Retrieve all the data from the "test " table
     $result = mysql_query("SELECT * FROM foto")
     or die(mysql_error());  

     // store the records of the "TABLENAME" table into $row array and loop through
     while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) 

     // Print out the contents of the entry 

     //echo "details: ".$row['id'];
     echo '<div class="box photo col3">';
     echo "<img src=\"".$row['src']."\" alt=\"wwwwww\" />";
     echo '</div>';
     
     ?>
     </div> <!-- #container -->

     <script src="./js/jquery-1.7.1.min.js"></script>
     <script src="./jquery.masonry.min.js"></script>
     <script>
       $(function()
         var $container = $('#container');
         $container.imagesLoaded( function()
           $container.masonry(
             itemSelector : '.box'
           );
         );

       );
     </script>
     <footer id="site-footer">
       szaki <a href="http://desandro.com">sdfsdfdsfsdf</a>
     </footer>

  </section> <!-- #content -->

</body>
</html>

【问题讨论】：

【参考方案1】：

您需要在查询中添加LIMIT。来自MySQL manual 的示例：

SELECT * FROM tbl LIMIT 5,10;  # Retrieve rows 6-15

这里，5 是起始偏移量，10 是您要获取的行数。

对于客户端，您需要infinite scroll jQuery plugin。

【讨论】：

以上是关于如何对 Infinite Scroll 的查询结果进行分页？的主要内容，如果未能解决你的问题，请参考以下文章