使用 AJAX 进行分页 - PHP (1)

📌 相关文章

📜 使用 AJAX 进行分页 - PHP (1)

📅 最后修改于: 2023-12-03 15:06:45.001000 🧑 作者: Mango

使用 AJAX 进行分页 - PHP

在网站开发中，分页功能是一个常见的需求。传统的分页方式是使用传统的form提交或者url跳转的方式，但这种方式会让用户体验不佳，因为每次跳转页面都需要重新加载整个页面。而使用 AJAX 进行分页可以在不刷新整个页面的情况下加载数据，提高了用户体验。

下面给出使用 PHP 实现 AJAX 分页的代码示例。

准备工作

在开始编写代码之前，需要先准备一些工作，包括：

数据库的连接和查询
获取当前页数和每页显示记录数
计算总记录数和总页数
根据当前页数和每页显示记录数，获取当前页的数据

页面结构

在HTML中创建带有引入jQuery和样式的div和一个id为content的空div。

<html>
<head>
   <title>AJAX pagination example in PHP with MYSQL - GIZMOSEEKERS.COM</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
   <style>
      /*样式*/
      #loading{
         text-align:center; 
         background: url('C:\xampp\htdocs\ajax-pagination\loader.gif') no-repeat center; 
         height: 150px;
         margin-top: 10%;
         width: 100%;
      }
      .post_content{
         background: #f9f9f9;
         border-bottom: #ccc 1px solid;
         padding: 10px;
         margin-bottom:10px;
      }
   </style>
</head>
<body>
   <div id="loading"></div>
   <div id="content"></div>
   
   <script>
      /*JavaScript*/
   </script>
</body>
</html>

AJAX 请求

在 JavaScript 中发送 AJAX 请求，获取数据并将数据添加到 content div 中。

 <script>
      $(document).ready(function(){
         function getData(page){

            $('#loading').show();
            $.ajax({
               url: 'getdata.php',
               type: 'POST',
               data: 'page='+page,
               dataType: 'html'
            })
            .done(function(data){
               $('#loading').fadeOut('slow', function(){
                  $('#content').fadeIn('slow').html(data);
               });
            })
            .fail(function(){
               alert('Ajax Submit Failed ...'); 
            });
         }

         getData(1);  //加载第一页的数据

         $(document).on('click', '.pagination li a', function(e){
            e.preventDefault();
            var page = $(this).attr('data-page'); 
            getData(page);
         });
      });
   </script>

PHP 数据获取

通过 query 根据要查询的记录的数量计算出总记录数 $total_rows。然后将每页显示的记录数赋值给 $rows_per_page.

每次执行 $.ajax 请求时，将当前页码传递到 getdata.php 文件并查询该页的数据。在查询中，首先计算需要跳过的记录数 $skip 和当前页码包含的记录数。然后根据这些信息查询记录。最后在循环中，将每个记录输出为HTML ，每个记录包含对应的分页编号 data-page。

<?php
   $connection = mysqli_connect("localhost","root","","ajax_pagination");

   //检查连接
   if (!$connection) {
      die("Connection failed: " . mysqli_connect_error());
   }

   // get the page number from URL parameter or set default page number
   if(!empty($_POST["page"])) {
      $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //page number
      if(!is_numeric($page_number)){die('Invalid page number!');} //如果页码数不是数字就用die()函数结束程序
   } else {
      $page_number = 1; //默认页码数为1
   }

   // get total number of records from database
   $sql = "SELECT COUNT(*) FROM posts";
   $result = mysqli_query($connection, $sql);
   $total_rows = mysqli_fetch_array($result)[0];

   // number of rows per page
   $rows_per_page = 5;
   
   // calculate total number of pages
   $last_page = ceil($total_rows/$rows_per_page);

   // calculate offset for SQL query
   $skip = (($page_number - 1) * $rows_per_page);

   // select records to be displayed
   $sql_query = "SELECT * FROM posts LIMIT $skip, $rows_per_page";
   $result = mysqli_query($connection, $sql_query);

   // fetch records into an array
   $posts_array = array();
   while($row = mysqli_fetch_assoc($result)) {
      $posts_array[] = $row;
   }

   // output records
   if(!empty($posts_array)) {
      foreach($posts_array as $post) {
         echo '<div class="post_content">';
         echo '   <h3>'.$post['title'].'</h3>';
         echo '   <p>'.$post['content'].'</p>';
         echo '</div>';
      }
   }

   // output pagination
   if($last_page > 1) {
      echo '<div class="pagination">';
      echo '<ul>';

      for($i = 1; $i <= $last_page; $i++) {
         echo '<li';
         if($page_number == $i) {
            echo ' class="active"';
         }
         echo '><a href="#" data-page="'.$i.'">'.$i.'</a></li>';
      }

      echo '</ul>';
      echo '</div>';
   }
?>

以上就是使用 PHP 实现 AJAX 分页的完整代码了。在页面中会显示一个正在加载的loading图片。每次点击页码链接时，会生成一个 AJAX 请求，并在 content div 中加载相应数据。每个记录都包含一个 data-page 属性，这个属性在用户单击时将传递到 getdata.php 文件中。在 getdata.php 中，需要根据当前数据计算每页显示的记录数，并为分页创建 HTML 。最后循环将每条数据输出到页面上。