Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax-post 无刷新分页技术
Blogger Information
Blog 60
fans 5
comment 3
visits 65259
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-post 无刷新分页技术
longlong
Original
757 people have browsed it

1. Ajax-post 无刷新分页技术

  • page.html:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-post 无刷新分页技术</title>
  7.     <style>
  8.         table{
  9.             width: 500px;
  10.             border: 1px solid black;
  11.             border-collapse: collapse;
  12.             margin: auto;
  13.             text-align: center;
  14.         }
  15.         table th,td{
  16.             border: 1px solid black;
  17.             padding: 5px;
  18.         }
  19.         table caption{
  20.             font-size: 1.5rem;
  21.             font-weight: bold;
  22.             margin-bottom: 20px;
  23.         }
  24.         table thead{
  25.             background-color: cadetblue;
  26.         }
  27.         p{
  28.             text-align: center;
  29.         }
  30.         p a{
  31.             text-decoration: none;
  32.             color: black;
  33.             padding: 3px 6px;
  34.             display: inline-block;
  35.             border: 1px solid black;
  36.             margin: 0 5px;
  37.         }
  38.         .active{
  39.             background-color: brown;
  40.         }
  41.     </style>
  42.   </head>
  43.   <body>
  44.       <table>
  45.           <caption>用户信息表</caption>
  46.           <thead>
  47.             <tr>
  48.               <th>id</th>
  49.               <th>姓名</th>
  50.               <th>年龄</th>
  51.               <th>性别</th>
  52.               <th>职位</th>
  53.               <th>手机号</th>
  54.             </tr>
  55.           </thead>
  56.           <tbody></tbody>
  57.         </table>
  58.         <!-- 分页条 -->
  59.         <!-- <p><a href="">11</a></p> -->
  60.         <p></p>
  61.         <script src="./jquery/jquery-3.5.1.min.js"></script>
  62.         <script>
  63.             // 1. 设置默认页为第一页
  64.             var page = 1;
  65.             // 2. 声明通过页码去请求数据的函数
  66.             getPageData(page);
  67.             function getPageData(page){
  68.                 $.ajax({
  69.                     type:'POST',
  70.                     url:'page-data.php',
  71.                     data:{page:page},
  72.                     dataType:'json',
  73.                     success:show,
  74.                 });
  75.             }
  76.             // 3. 请求成功后执行数据渲染的函数
  77.             function show(data){
  78.                 // console.log(data);
  79.                 // console.log(data.pages);
  80.                 // console.log(data.users);
  81.                 // console.log(data.postPage);
  82.                 // 4. 将用户信息数据渲染出来
  83.                 var str = "";
  84.                 data.users.forEach(function(user){
  85.                     str += '<tr>';
  86.                     str += '<td>' + user.id + '</td>';
  87.                     str += '<td>' + user.name + '</td>';
  88.                     str += '<td>' + user.age + '</td>';
  89.                     str += '<td>' + user.sex + '</td>';
  90.                     str += '<td>' + user.position + '</td>';
  91.                     str += '<td>' + user.mobile + '</td>';
  92.                     str += '</tr>';
  93.                 });
  94.                 $('tbody').html(str);
  96.                 // 5. 将分页条显示出来
  97.                 // 5.1 生成所有的分页条
  98.                 var str=""; 
  99.                 for(var i=1;i<=data.pages;i++){
  100.                     str += '<a href="" data-index=' + i + '>' + i + '</a>';
  101.                 }
  102.                 $('p').html(str);
  103.                 // 5.2 循环所有的分页条，找到当前通过POST方式传进去的页码，给它增加高亮显示
  104.                 for(var i=1;i<=data.pages;i++){
  105.                     if(data.postPage == i){
  106.                         var finda = 'p a:nth-of-type('+data.postPage+')';
  107.                         $(finda).addClass('active');
  108.                     }
  109.                 }
  111.                 // 6. 给分页条添加点击事件
  112.                 $('p a').click(function(ev){
  113.                     // 6.1 禁用a标签默认跳转行为
  114.                     ev.preventDefault();
  115.                     // console.log(ev.target);
  116.                     // 6.2 拿到当前点击对象的自定义索引，此索引和页码是相对应的
  117.                     var nowPage = ev.target.dataset.index;
  118.                     // console.log(nowPage);
  119.                     // 6.3 把当前点击对象的页码传入请求数据的函数中继续执行请求任务
  120.                     getPageData(nowPage);
  121.                 });
  124.             }       
  125.         </script>
  126.       </table>
  127.   </body>
  128. </html>
  • page-data.php:
  1. <?php
  2. // 1.连接数据库
  3. $pdo = new PDO('mysql:host=front.edu;dbname=test','root','root');
  4. // var_dump($pdo);
  6. // 2.获取当前页码
  7. $page = $_POST['page'] ?? 1;
  9. // 3.设置每页显示数量
  10. $num = 8;
  12. // 4.计算偏移量
  13. $offset = ($page-1)*$num;
  15. // 5.计算总页数
  16. $sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `users`";
  17. $pages = $pdo->query($sql)->fetch()['total'];
  18. // echo $pages;
  20. // 6.获取分页数据
  21. $sql = "SELECT * FROM `users` LIMIT {$num} OFFSET {$offset}";
  22. $users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  24. // 7.返回数据(要将数据解析为json)
  25. // 返回数据的三个部分解释：
  26. // 总页数pages：用于给前端生成页码
  27. // 用户信息users：用于前端渲染分页数据
  28. // 当前页码postPage：用于前端寻找当前页码使其高亮显示
  29. echo json_encode(['pages'=>$pages,'users'=>$users,'postPage'=>$page]);
  30. die;
  • 效果如下：

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