Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 使用AJAX实现无刷新分页
Blogger Information
Blog 26
fans 2
comment 0
visits 24415
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用AJAX实现无刷新分页
leverWang
Original
669 people have browsed it

index.html

  1. <!-- @format -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <script src="https://s2.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js"></script>
  10.     <script src="data.js"></script>
  12.     <style>
  13.       table {
  14.         border-collapse: collapse;
  15.         border: 1px solid;
  16.         text-align: center;
  17.         margin: auto;
  18.         width: 500px;
  19.       }
  21.       table caption {
  22.         font-size: 1.2rem;
  23.         margin-bottom: 10px;
  24.       }
  26.       th,
  27.       td {
  28.         border: 1px solid;
  29.         padding: 5px;
  30.       }
  32.       thead tr:first-of-type {
  33.         background-color: #ddd;
  34.       }
  36.       p {
  37.         text-align: center;
  38.       }
  40.       p a {
  41.         text-decoration: none;
  42.         border: 1px solid;
  43.         padding: 0 8px;
  44.       }
  46.       .active {
  47.         background-color: #f00;
  48.       }
  49.     </style>
  50.   </head>
  52.   <body>
  53.     <table>
  54.       <caption>
  55.         用户信息表
  56.       </caption>
  57.       <thead>
  58.         <tr>
  59.           <th>id</th>
  60.           <th>姓名</th>
  61.           <th>年龄</th>
  62.           <th>性别</th>
  63.           <th>职位</th>
  64.           <th>手机号</th>
  65.         </tr>
  66.       </thead>
  67.       <tbody></tbody>
  68.     </table>
  69.     <p></p>
  70.   </body>
  71. </html>

data.js

  3. $(document).ready(function () {
  4.   var page = 1;
  6.   getData(page);
  7. //发送请求
  8.   function getData(page) {
  9.     $.ajax({
  10.       type: "POST",
  11.       url: "data.php",
  12.       data: { page: page },
  13.       dataType: "json",
  14.       success: show,
  15.     });
  16.   }
  17. //定义数据渲染方法
  18.   function show(data) {
  19.     // console.log(data);
  20.     //填充默认数据
  21.     console.log(page);
  22.     var str = "";
  23.     data.res.forEach(function (item) {
  24.       str += "<tr>";
  25.       str += "<td>" + item.id + "</td>";
  26.       str += "<td>" + item.name + "</td>";
  27.       str += "<td>" + item.age + "</td>";
  28.       str += "<td>" + item.sex + "</td>";
  29.       str += "<td>" + item.position + "</td>";
  30.       str += "<td>" + item.mobile + "</td>";
  31.       str += "</tr>";
  32.     });
  33.     $("tbody").html(str);
  34.     //分页
  35.     var str = "";
  36.     for (var i = 1; i < data.pages; i++) {
  37.       str += '<a href="" data-index=' + i + ">" + i + "</a>";
  38.     }
  39.     //为当前的页码添加样式
  40.     $("p")
  41.       .html(str)
  42.       .find("a")
  43.       .eq(page - 1)
  44.       .first()
  45.       .addClass("active");
  47.     $("p a").on("click", function (ev) {
  48.       console.log(this);
  49.       ev.preventDefault();
  50.       // // 获取当前要显示的新页面,根据自定义属性
  51.       page = $(this).attr("data-index");
  53.       getData(page);
  54.     });
  55.   }
  56. });

data.php

  1. <?php
  2. $num = 10;
  4. $page = $_POST['page'] ?? 1;
  5. $offset = ($page - 1) * $num;
  7. $dsn = "mysql:host=localhost;dbname=phpedu";
  8. $pdo = new PDO($dsn, 'root', 'root');
  9. $sql = "SELECT CEIL(COUNT(`id`)/{$num})  AS `Total` FROM users ";
  10. $pages = $pdo->query($sql)->fetch()['Total'];
  12. $stmt = $pdo->prepare('select * from users limit ? offset ?');
  13. $stmt->bindParam(1, $num, PDO::PARAM_INT);
  14. $stmt->bindParam(2, $offset, PDO::PARAM_INT);
  15. $stmt->execute();
  16. $res = $stmt->fetchAll(PDO::FETCH_ASSOC);
  18. echo json_encode(['pages'=>$pages,'res'=>$res]);

效果如下:

总结：学会使用JQ的ajax方法请求数据，并结合前面的知识将数据动态渲染到页面中.
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：页码高亮看来是没实现, 不过,很好的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post