search

博客列表 >仿php中文网复杂分页

仿php中文网复杂分页

lilove的博客
lilove的博客原创
2020年09月06日 02:13:48925浏览

在简单分页基础上进行改良，使得分页条长度限制在一定长度内

上代码：

  1. <?php
  2. // 连接数据库文件
  3. require "db.php";
  5. // 查询数据
  6. $select = "SELECT `id`,`user_name`,`password`,`user_type` FROM `user`";
  7. $data = $pdo->prepare($select);
  8. $data->execute();
  9. $res = $data->fetchAll();
  11. if ($data->rowCount() == 0) {
  12.     exit("<script>
  13.         alert('查询失败')
  14.     </script>");
  15. }
  17. // 分页
  18. // 1.每页显示数量，由前端获取，默认为2
  19. $num = 2;
  21. // 2.当前页码，默认为1
  22. $page = $_GET['p'] ?? 1;
  24. // 3.计算每页第一条记录偏移量
  25. $offset = ($page - 1) * $num;
  27. // 4.获取分页数据
  28. $pagedata = "SELECT * FROM `user` LIMIT {$num} OFFSET {$offset}";
  29. // 语句简写
  30. // $pagedata = "SELECT * FROM `user` LIMIT {$offset}, {$num}";
  31. $users = $pdo->query($pagedata)->fetchAll();
  33. // 5.计算总页数
  34. // 计算表中共计有多少条记录，每页显示几条
  35. // 总页数=ceil(记录总数/每页的记录数)：ceil()向上取整函数
  36. $sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `user`";
  37. $pages = $pdo->query($sql)->fetch()['total'];
  39. // 6.取选中页码和前后2页组成中间显示的5页
  40. // 要显示页码的起始页(处理越界问题)
  41. $startpage = ($page - 2) <= 0 ? 1 : ($page - 2);
  42. // 要显示页码的结束页(处理越界问题)
  43. $stoppage = ($page + 2) > $pages ? $pages : ($page + 2);
  45. // 7.翻页
  46. // 上一页
  47. $prev = ($page - 1) == 0 ? 1 : ($page - 1);
  48. // 下一页
  49. $next = ($page + 1) > $pages ? $pages : ($page + 1);
  51. ?>
  53. <!DOCTYPE html>
  54. <html lang="zh-cn">
  56. <head>
  57.     <meta charset="UTF-8">
  58.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  59.     <title>控制台（复杂分页）</title>
  60. </head>
  61. <style>
  62.     * {
  63.         margin: 0;
  64.         padding: 0;
  65.         box-sizing: border-box;
  66.     }
  68.     body {
  69.         min-width: 1000px;
  70.     }
  72.     .tab {
  73.         width: 1100px;
  74.         margin: 50px auto 10px;
  75.         text-align: center;
  76.         border-collapse: collapse;
  77.     }
  79.     .tab tr:hover {
  80.         background-color: rgb(240, 240, 240);
  81.     }
  83.     .tab th,
  84.     .tab td {
  85.         border: 1px solid rgb(230, 230, 230);
  86.         padding: 5px 0;
  87.     }
  89.     .btn {
  90.         width: 45px;
  91.         height: 30px;
  92.         border: none;
  93.         color: white;
  94.         border-radius: 15px;
  95.         transition: 300ms;
  96.     }
  98.     .btn:hover {
  99.         border-radius: 0;
  100.     }
  102.     .btn-success {
  103.         background-color: rgb(0, 150, 136);
  104.     }
  106.     .btn-dangerous {
  107.         background-color: rgb(255, 87, 34);
  108.     }
  111.     .container {
  112.         text-align: center;
  113.     }
  115.     .page {
  116.         font-size: 0;
  117.         margin: 10px auto;
  118.     }
  120.     .page>.list {
  121.         display: inline-block;
  122.         min-width: 30px;
  123.         height: 20px;
  124.         font-size: 16px;
  125.     }
  127.     .page>.list>.link {
  128.         display: block;
  129.         line-height: 20px;
  130.         text-align: center;
  131.         padding: 5px;
  132.         border: 1px solid rgb(230, 230, 230);
  133.         text-decoration: none;
  134.     }
  136.     .page>.list>.link {
  137.         border-right: none;
  138.     }
  140.     .page>.list:last-of-type>.link {
  141.         border-right: 1px solid rgb(230, 230, 230);
  142.     }
  144.     .page>.list>.link:hover {
  145.         color: white;
  146.         background-color: rgb(75, 178, 255);
  147.     }
  149.     .active {
  150.         color: white;
  151.         background-color: rgb(30, 159, 255);
  152.     }
  154.     .hidden {
  155.         display: none;
  156.     }
  157. </style>
  159. <body>
  160.     <table class="tab">
  161.         <thead>
  162.             <tr>
  163.                 <th>ID</th>
  164.                 <th>用户名</th>
  165.                 <th>密码</th>
  166.                 <th>用户类型</th>
  167.                 <th>操作</th>
  168.             </tr>
  169.         </thead>
  170.         <tbody>
  171.             <!-- 渲染表格数据 -->
  172.             <?php foreach ($users as $user) : ?>
  173.                 <tr>
  174.                     <td><?php echo $user["id"] ?></td>
  175.                     <td><?php echo $user["user_name"] ?></td>
  176.                     <td><?php echo $user["password"] ?></td>
  177.                     <td><?php echo $user["user_type"] == 1 ? "管理员" : "非管理员" ?></td>
  178.                     <td>
  179.                         <button class="btn btn-success" onclick="location.href='handle.php?action=edit&userid=<?= $user['id'] ?>'">编辑</button>
  180.                         <button class="btn btn-dangerous" onclick="location.href='handle.php?action=del&userid=<?= $user['id'] ?>'">删除</button>
  181.                     </td>
  182.                 </tr>
  183.             <?php endforeach ?>
  184.         </tbody>
  185.     </table>
  186.     <!-- 复杂分页 -->
  187.     <div class="container">
  188.         <ul class="page">
  189.             <li class="list"><a href="<?= $_SERVER['PHP_SELF'] . '?p=1' ?>" class="link">首页</a></li>
  190.             <li class="list"><a href="<?= $_SERVER['PHP_SELF'] . '?p=' . $prev ?>" class="link">上一页</a></li>
  192.             <!-- 总页数大于10时进行分割 -->
  193.             <?php if ($pages >= 10) : ?>
  194.                 <li class="<?= $page <= 3 ? 'hidden' : 'list'; ?>"><a href="<?= $_SERVER['PHP_SELF'] . '?p=1' ?>" class="link">1</a></li>
  195.                 <li class="<?= $page <= 4 ? 'hidden' : 'list'; ?>"><a href="<?= $_SERVER['PHP_SELF'] . '?p=2' ?>" class="link">2</a></li>
  197.                 <!-- 判断当前页码隐藏... -->
  198.                 <li class="<?= $page <= 5 ? 'hidden' : 'list'; ?>"><a href="" class="link">...</a></li>
  200.                 <!-- 从中间页码起始页取遍历开始的值$i -->
  201.                 <?php for ($i = $startpage; $i <= $stoppage; $i++) : ?>
  202.                     <?php
  203.                     // $i是分页条中的页码，$page是url中get获取到的页码
  204.                     $active = ($i == $page) ? 'active' : null;
  205.                     // 用sprintf()拼接url字符串
  206.                     $jump = sprintf("%s?p=%s", $_SERVER['PHP_SELF'], $i);
  207.                     ?>
  208.                     <li class="list"><a href="<?= $jump ?>" class="link <?= $active ?>"><?= $i ?></a></li>
  209.                 <?php endfor ?>
  211.                 <!-- 后面的... -->
  212.                 <li class="<?= $page >= ($pages - 4) ? 'hidden' : 'list'; ?>"><a href="" class="link">...</a></li>
  213.                 <li class="<?= $page >= ($pages - 3) ? 'hidden' : 'list'; ?>"><a href="<?= $_SERVER['PHP_SELF'] . '?p=' . ($pages - 1) ?>" class="link"><?= $pages - 1 ?></a></li>
  214.                 <li class="<?= $page >= ($pages - 2) ? 'hidden' : 'list'; ?>"><a href="<?= $_SERVER['PHP_SELF'] . '?p=' . $pages ?>" class="link"><?= $pages ?></a></li>
  215.             <?php else : ?>
  216.                 <!-- 如果总页码小于10时使用简单分页 -->
  217.                 <?php for ($i = 1; $i <= $pages; $i++) : ?>
  218.                     <?php
  219.                     // $i是分页条中的页码，$page是url中get获取到的页码
  220.                     $active = ($i == $page) ? 'active' : null;
  221.                     // 可以用sprintf()拼接url字符串
  222.                     $jump = sprintf("%s?p=%s", $_SERVER['PHP_SELF'], $i);
  223.                     ?>
  224.                     <li class="list"><a href="<?= $jump ?>" class="link <?= $active ?>"><?= $i ?></a></li>
  225.                 <?php endfor ?>
  226.             <?php endif; ?>
  228.             <li class="list"><a href="<?= $_SERVER['PHP_SELF'] . '?p=' . $next ?>" class="link">下一页</a></li>
  229.             <li class="list"><a href="<?= $_SERVER['PHP_SELF'] . '?p=' . $pages ?>" class="link">尾页</a></li>
  230.         </ul>
  231.     </div>
  233. </body>
  234. </html>
  • 运行效果

总结：
1.越界问题使用判断页码长度来解决；
2.前两页和省略号，后两页和省略号的出现时机判定使用中间页面的首页与尾页来做；
3.我将页面部署到linux+php7.3.8时，对于 <?...?> 不加php无法渲染表格数据，写成 <?php...?> 后解决问题；

上一条：模板字面量，标签模板，标签函数参数及遍历-Es6-48课9.2下一条：PHP大牛成长之路：类的继承（原生+ES6)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多