一、Ajax-post无刷新分页技术

1、新建demo3.html,制作表单和样式，引入`jquery-3.5.1.js`、并指定url地址：`page_data.php`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax-post无刷新分页技术</title>
    <style>
      table {
        border-collapse: collapse;
        border: 1px solid;
        text-align: center;
        margin: auto;
        width: 500px;
      }
      table caption {
        font-size: 1.2rem;
        margin-bottom: 10px;
      }
      th,
      td {
        border: 1px solid;
        padding: 5px;
      }
      thead tr:first-of-type {
        background-color: #ddd;
      }
      p {
        text-align: center;
      }
      p a {
        text-decoration: none;
        border: 1px solid;
        padding: 0 8px;
      }
      .active {
        background-color: rgb(223, 87, 121);
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        用户信息表
      </caption>
      <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>职位</th>
          <th>手机号</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 分页条 -->
    <p></p>
    <script src="../0818/lib/jquery-3.5.1.js"></script>
    <script>
      // 默认是第一页
      var page = 1;
      // 默认显示的是第一页
      getPageData(page);
      // 获取分页数据的函数
      function getPageData(page) {
        $.ajax({
          type: "post",
          url: "page_data.php",
          data: { page: page },
          dataType: "json",
          success: show,
        });
      }
      // show()显示数据
      function show(data) {
        console.log(data);
        // 将json中的数据解析出来填充到表格中
        console.log(data.users);
        // 1. 将当前页面的数据渲染出来
        var str = "";
        data.users.forEach(function (user) {
          str += "<tr>";
          str += "<td>" + user.id + "</td>";
          str += "<td>" + user.name + "</td>";
          str += "<td>" + user.age + "</td>";
          str += "<td>" + user.sex + "</td>";
          str += "<td>" + user.position + "</td>";
          str += "<td>" + user.mobile + "</td>";
          str += "</tr>";
        });
        $("tbody").html(str);
        // 2. 将分页条显示出来
        var str = "";
        for (var i = 1; i < data.pages; i++) {
          str += '<a href="" data-index=' + i + ">" + i + "</a>";
        }
        $("p").html(str);
        // 高亮显示，遍历所有分页
        for (var i = 1; i <= data.pages; i++) {
          if (data.postPage == i) {
            var finda = "p a:nth-of-type(" + data.postPage + ")";
            $(finda).addClass("active");
          }
        }
        // 3. 添加分页点击事件
        $("p a").click(function (ev) {
          ev.preventDefault();
          // 获取当前要显示的新页面,根据自定义属性
          var page = $(this).attr("data-index");
          //   $("tbody").html("");
          getPageData(page);
        });
      }
    </script>
  </body>
</html>

2、创建page_data.php，连接数据库

<?php
// 1. 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'melinda123');
// 2. 获取页码
$page = $_POST['page'] ?? 1;
// 3. 每页显示数量
$num = 8;
// 4. 每页显示偏移量
$offset = ($page - 1) * $num;
// 5. 总页数
$sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `users`";
// echo $sql;
$pages = $pdo->query($sql)->fetch()['total'];
// echo $pages;
// 6. 分页数据
$sql = "SELECT * FROM `users` LIMIT {$num} OFFSET {$offset}";
$users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
// ajax分页数据一定是返回二部分
// 1. 总页数, 提供给前端自动生成分页条
// 2. 分页数据
echo json_encode(['pages' => $pages, 'users' => $users,'postPage'=>$page]);
die;