博客列表 >PHP 分页导航的实践与总结

PHP 分页导航的实践与总结

萨龙龙
萨龙龙原创
2020年05月14日 19:29:09690浏览

简介

在 PHP 分页导航的实践中,需要注意的细节真的很多,相对之前使用框架来做复杂太多。通过自己的慢慢学习还是把整个分页做下来,编辑和删除的交互也做好,如果 ajax 技术牛逼,效果更佳。

代码演示

1、connect.php 连接数据库代码

  1. $dsn = "mysql:host=localhost;dbname=localhost;charset=utf8;port=3306";
  2. $username = 'root';
  3. $password = 'root';
  4. /* 连接 */
  5. try {
  6. $pdo = new PDO($dsn, $username, $password);
  7. $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
  8. } catch (Exception $e) {
  9. die($e->getMessage());
  10. }

2、pages.php 用户列表分页代码

  1. <?php
  2. /* 连接数据库 */
  3. require 'connect.php';
  4. /* 获取当前页码 */
  5. $page = isset($_GET['page']) ? $_GET['page'] : 1;
  6. /* 获取动作 */
  7. $action = isset($_GET['action']) ? $_GET['action'] : '';
  8. /* 获取用户 ID */
  9. $getId = isset($_GET['id']) ? $_GET['id'] : '';
  10. /* 通过 ID 获取用户名称 */
  11. if ($getId && $action != 'dodelete') {
  12. $userSql = "SELECT * FROM `users` WHERE `ID`={$getId}";
  13. $getUser = $pdo->query($userSql)->fetchAll();
  14. $getName = array_pop($getUser)['display_name'];
  15. }
  16. /***************************************************************
  17. * 获取用户数据
  18. **************************************************************/
  19. /* 获取每页显示数量 */
  20. $num = 10;
  21. /* 获取总页数 */
  22. $sql = "SELECT CEIL( COUNT(`id`)/{$num} ) AS `total` FROM `users`";
  23. $pages = $pdo->query($sql)->fetch()['total'];
  24. /* 偏移量 */
  25. $offset = $num * ($page - 1);
  26. /* 当前数据 */
  27. $sql = "SELECT * FROM `users` LIMIT {$num} OFFSET {$offset} ";
  28. $users = $pdo->query($sql)->fetchAll();
  29. /***************************************************************
  30. * 获取用户数据 end
  31. **************************************************************/
  32. /***************************************************************
  33. * 获取分页数据
  34. **************************************************************/
  35. /* 显示多少分页 */
  36. $showPages = 9;
  37. /* 开始页 */
  38. $startPage = 1;
  39. /* 结束页 */
  40. $endPage = $pages;
  41. /* 偏移量,不能小于 $startendOffset 的值 */
  42. $offsetPage = ($showPages - 1) / 2;
  43. /* 前后页码各偏移3=前后各留出两个页码+一个省略的页码 */
  44. $startendOffset = 3;
  45. /* 最后留出的页码 */
  46. $endOffsetPage = $offsetPage + $startendOffset;
  47. /* 最后起始页码 */
  48. $endStartPage = $offsetPage * 2;
  49. // 只有当前分页条数量 < 总页数, 才有必要显示出省略标记
  50. if ($showPages < $pages) {
  51. if ($page > $offsetPage + $startendOffset) {
  52. $startOmit = '...';
  53. }
  54. /* 当前页大于偏移量 */
  55. if ($page > $offsetPage + $startendOffset) {
  56. $startPage = $page - $offsetPage;
  57. $endPage = $page + $offsetPage;
  58. if ($endPage > $pages) {$endPage = $pages;}
  59. } else {
  60. $startPage = 1;
  61. $endPage = $showPages;
  62. }
  63. /* 当前页+偏移量大于部页数 */
  64. if ($page + $offsetPage > $pages) {
  65. $startPage = $startPage - ($page + $offsetPage - $endPage);
  66. }
  67. /* 当前页码<=总页码-最后留出的页码 */
  68. if ($page <= $pages - $endOffsetPage) {
  69. /* 总页码>显示页码,当前页码+偏移量<总页码 */
  70. if ($pages > $showPages && $page + $offsetPage < $pages) {
  71. /* 显示省略 */
  72. $endOmit = '...';
  73. }
  74. } else {
  75. /* 开始页码=总页码-最后起始页码 */
  76. $startPage = $pages - $endStartPage;
  77. $endPage = $pages;
  78. }
  79. }
  80. /***************************************************************
  81. * 获取分页数据 end
  82. **************************************************************/
  83. /***************************************************************
  84. * 输出提示
  85. **************************************************************/
  86. /* 循环 */
  87. switch ($action) {
  88. /* 编辑 */
  89. case 'doedit':
  90. if ($getId) {
  91. $hint = sprintf('<strong>%s</strong> 用户资料更新成功!', $getName);
  92. } else {
  93. $hint = '没有用户资料被更新!';
  94. }
  95. break;
  96. /* 删除 */
  97. case 'dodelete':
  98. if ($getId) {
  99. $hint = '用户删除成功!';
  100. } else {
  101. $hint = '没有用户被删除!';
  102. }
  103. break;
  104. }
  105. /***************************************************************
  106. * 输出提示 end
  107. **************************************************************/
  108. ?>
  109. <!DOCTYPE html>
  110. <html lang="en">
  111. <head>
  112. <meta charset="UTF-8">
  113. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  114. <link href="https://yfdxs.com/wp-content/themes/lensnews/assets/images/favicon.jpg" rel="shortcut icon" />
  115. <link rel="stylesheet" href="style.css">
  116. <title>分页</title>
  117. </head>
  118. <body>
  119. <div class="container">
  120. <table class="user-table">
  121. <!-- 标题 -->
  122. <caption>用户列表</caption>
  123. <!-- 表头 -->
  124. <thead>
  125. <tr>
  126. <th>ID</th>
  127. <th>用户名</th>
  128. <th>邮箱</th>
  129. <th>网站</th>
  130. <th>注册时间</th>
  131. <th>操作</th>
  132. </tr>
  133. </thead>
  134. <!-- 主体 -->
  135. <tbody>
  136. <?php foreach ($users as $key => $user):
  137. $user_url = $user['user_url'];
  138. $user_url = $user['user_url'] ? '<a href="' . $user_url . '" target="_blank">' . $user_url . '</a>' : '该用户没有网站';
  139. $user_email = $user['user_email'];
  140. $user_email = $user_email ? $user_email : '该用户没有邮箱';
  141. ?>
  142. <tr>
  143. <td><?php echo $user['ID']; ?></td>
  144. <td><?php echo $user['display_name']; ?></td>
  145. <td><?php echo $user_email; ?></td>
  146. <td><?php echo $user_url; ?></td>
  147. <td><?php echo $user['user_registered']; ?></td>
  148. <td>
  149. <button class="button edit"
  150. onclick="location.href='handle.php?page=<?php echo $page ?>&action=edit&id=<?php echo $user['ID'] ?>'">编辑</button>
  151. <button class="button delete"
  152. onclick="location.href='handle.php?page=<?php echo $page ?>&action=delete&id=<?php echo $user['ID'] ?>'">删除</button>
  153. </td>
  154. </tr>
  155. <?php endforeach;?>
  156. </tbody>
  157. </table>
  158. <!-- 分页 -->
  159. <?php if ($pages > 1): $php_self = $_SERVER['PHP_SELF'];?>
  160. <div class="pagination">
  161. <!-- 当前页码大于1才显示 -->
  162. <?php if ($page > 1): ?>
  163. <!-- 首页 -->
  164. <a href="<?php echo $php_self . '?page=1'; ?>" class="page">首页</a>
  165. <!-- 上一页 -->
  166. <?php $prev = ($page == 1) ? 1 : $page - 1;?>
  167. <a href="<?php echo $php_self . '?page=' . $prev; ?>" class="page">上一页</a>
  168. <?php endif;?>
  169. <!-- 前两页 -->
  170. <?php if ($page > $offsetPage + $startendOffset): ?>
  171. <!-- 循环 -->
  172. <?php for ($i = 1; $i <= 2; $i++): $page_url = sprintf('%s?page=%s', $php_self, $i);?>
  173. <a href="<?php echo $page_url; ?>" class="page"><?php echo $i; ?></a>
  174. <?php endfor;?>
  175. <?php endif;?>
  176. <!-- 省略 -->
  177. <?php if (isset($startOmit)): ?> <span class="page"><?php echo $startOmit; ?></span> <?php endif;?>
  178. <!-- 循环 -->
  179. <?php for ($i = $startPage; $i <= $endPage; $i++):
  180. $page_url = sprintf('%s?page=%s', $php_self, $i);
  181. $active = ($page == $i) ? ' active' : '';?>
  182. <a href="<?php echo $page_url; ?>" class="page<?php echo $active; ?>"><?php echo $i; ?></a>
  183. <?php endfor;?>
  184. <!-- 循环 end -->
  185. <!-- 省略 -->
  186. <?php if (isset($endOmit)): ?> <span class="page"><?php echo $endOmit; ?></span> <?php endif;?>
  187. <!-- 后两页 -->
  188. <?php if ($page < $pages - $offsetPage - 2): ?>
  189. <!-- 循环 -->
  190. <?php for ($i = $pages - 1; $i <= $pages; $i++):
  191. $page_url = sprintf('%s?page=%s', $php_self, $i);
  192. ?>
  193. <a href="<?php echo $page_url; ?>" class="page"><?php echo $i; ?></a>
  194. <?php endfor;?>
  195. <?php endif;?>
  196. <!-- 当前页码小于总页码才显示 -->
  197. <?php if ($page < $pages): ?>
  198. <!-- 下一页 -->
  199. <?php $next = ($page >= $pages) ? $pages : $page + 1;?>
  200. <a href="<?php echo $php_self . '?page=' . $next; ?>" class="page">下一页</a>
  201. <!-- 尾页 -->
  202. <a href="<?php echo $php_self . '?page=' . $pages; ?>" class="page"> 尾页</a>
  203. <?php endif;?>
  204. <!-- 页面跳转 -->
  205. <form action="" method="get" class="jump-page">
  206. <input type="number" name="page" min="1" max="<?php echo $pages ?>">
  207. <button class="button jump">跳转</button>
  208. </form>
  209. </div>
  210. <?php endif;?>
  211. <!-- 提示,3秒后移除提示 -->
  212. <?php echo isset($hint) ? '<div class="hint">' . $hint . '</div><script>window.onload=function(){ var hint = document.getElementsByClassName("hint")[0]; setTimeout( function(){hint.remove()}, 3000); }</script>' : ''; ?>
  213. </div>
  214. </body>
  215. </html>

edit.php 编辑用户信息代码

  1. <?php
  2. /* 获取要编辑的用户信息 */
  3. $user = $pdo->query("SELECT * FROM `users` WHERE `ID`={$id}")->fetch();
  4. /* 链接 */
  5. $user_url = $user['user_url'];
  6. $user_url = $user['user_url'] ?? '';
  7. /* 邮箱 */
  8. $user_email = $user['user_email'];
  9. $user_email = $user_email ?? '';
  10. /* 获取当前页码 */
  11. $page = isset($_GET['page']) ? $_GET['page'] : 1;
  12. ?>
  13. <!DOCTYPE html>
  14. <html lang="en">
  15. <head>
  16. <meta charset="UTF-8">
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <link rel="stylesheet" href="style.css">
  19. <title>编辑用户信息</title>
  20. </head>
  21. <body>
  22. <div class="container">
  23. <div class="edit-form">
  24. <h3>编辑用户信息</h3>
  25. <form action="<?php echo $_SERVER['PHP_SELF'] . '?action=doedit&page=' . $page . '&id=' . $id ?>"
  26. method="post">
  27. <div>
  28. <label for="name">姓名:</label>
  29. <input type="text" id="name" name="name" value="<?php echo $user['display_name'] ?>" autofocus>
  30. </div>
  31. <div>
  32. <label for="email">邮箱:</label>
  33. <input type="text" id="email" name="email" value="<?php echo $user_email ?>">
  34. </div>
  35. <div>
  36. <label for="url">网站:</label>
  37. <input type="text" id="url" name="url" value="<?php echo $user_url ?>">
  38. </div>
  39. <div>
  40. <input type="hidden" name="id" value="<?php echo $user['ID'] ?>">
  41. <button class="button save">保存更改</button>
  42. </div>
  43. </form>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

4、delete.php 删除用户代码

  1. <?php
  2. /* 获取要编辑的用户信息 */
  3. $user = $pdo->query("SELECT * FROM `users` WHERE `ID`={$id}")->fetch();
  4. /* 链接 */
  5. $user_url = $user['user_url'];
  6. $user_url = $user['user_url'] ? '<a href="' . $user_url . '" target="_blank">' . $user_url . '</a>' : '该用户没有网站';
  7. /* 邮箱 */
  8. $user_email = $user['user_email'];
  9. $user_email = $user_email ? $user_email : '该用户没有邮箱';
  10. /* 获取当前页码 */
  11. $page = isset($_GET['page']) ? $_GET['page'] : 1;
  12. ?>
  13. <!DOCTYPE html>
  14. <html lang="en">
  15. <head>
  16. <meta charset="UTF-8">
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <link rel="stylesheet" href="style.css">
  19. <title>删除用户</title>
  20. </head>
  21. <body class="delete-user">
  22. <div class="container">
  23. <table class="user-table">
  24. <!-- 标题 -->
  25. <caption>删除 <?php echo $user['display_name']; ?></caption>
  26. <!-- 表头 -->
  27. <thead>
  28. <tr>
  29. <th>ID</th>
  30. <th>用户名</th>
  31. <th>邮箱</th>
  32. <th>网站</th>
  33. <th>注册时间</th>
  34. </tr>
  35. </thead>
  36. <!-- 主体 -->
  37. <tbody>
  38. <tr>
  39. <td><?php echo $user['ID']; ?></td>
  40. <td><?php echo $user['display_name']; ?></td>
  41. <td><?php echo $user_email; ?></td>
  42. <td><?php echo $user_url; ?></td>
  43. <td><?php echo $user['user_registered']; ?></td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. <a href="<?php echo 'handle.php?action=dodelete&page=' . $page . '&id=' . $user['ID'] ?>"
  48. class="button delete">确定删除</a>
  49. </div>
  50. </body>
  51. </html>

5、handle.php 处理编辑和删除用户接口

  1. <?php
  2. /* 连接数据库 */
  3. require 'connect.php';
  4. /* 获取用户 ID */
  5. $id = isset($_GET['id']) ? $_GET['id'] : '';
  6. $action = isset($_GET['action']) ? $_GET['action'] : '';
  7. /* 获取当前页码 */
  8. $page = isset($_GET['page']) ? $_GET['page'] : 1;
  9. /* 循环 */
  10. switch ($action) {
  11. /* 进入编辑字段表单页面 */
  12. case 'edit':
  13. include 'edit.php';
  14. break;
  15. /* 修改并保存编辑用户表单中的数据 */
  16. case 'doedit':
  17. $sql = 'UPDATE `users` SET `display_name`=:name, `user_email`=:email, `user_url`=:url WHERE `ID`=:id';
  18. $stmt = $pdo->prepare($sql);
  19. $stmt->execute($_POST);
  20. /* 判断是否修改 */
  21. if ($stmt->rowCount() === 1) {
  22. echo '<script>alert("更新成功");location.href="pages.php?action=doedit&page=' . $page . '&id=' . $id . '";</script>';
  23. } else {
  24. echo '<script>alert("更新失败或没有内容被修改");location.href="pages.php?action=doedit&page=' . $page . '&id=0";</script>';
  25. }
  26. break;
  27. /* 预览要删除的用户 */
  28. case 'delete':
  29. include 'delete.php';
  30. break;
  31. /* 执行要删除的用户 */
  32. case 'dodelete':
  33. $sql = "DELETE FROM `users` WHERE `ID`={$id}";
  34. $stmt = $pdo->query($sql);
  35. if ($stmt->rowCount() === 1) {
  36. echo '<script>alert("删除成功");location.href="pages.php?action=dodelete&page=' . $page . '&id=' . $id . '";</script>';
  37. } else {
  38. echo '<script>alert("删除失败");location.href="pages.php?action=dodelete&page=' . $page . '&id=0";</script>';
  39. }
  40. break;
  41. }

6、Sass 样式代码

  1. @charset "utf-8";
  2. /*************************************************
  3. 变量
  4. **************************************************/
  5. /* 默认颜色 */
  6. $color:#667eea;
  7. /* 鼠标经过颜色 */
  8. $hoverColor:#4c51bf;
  9. /* 标题 */
  10. $titleColor: #1a202c;
  11. /* 描边 */
  12. $borderColor: #edf2f7;
  13. /* 表格头部背景 */
  14. $headerColor: #ebf4ff;
  15. /* 表格行背景 */
  16. $rowColor:#f7fafc;
  17. /* 当前页码颜色 */
  18. $currentColor: #bd7886;
  19. /*************************************************
  20. 全局设置
  21. **************************************************/
  22. html,
  23. body,
  24. body * {
  25. margin: 0;
  26. padding: 0;
  27. border: 0;
  28. background: transparent;
  29. -webkit-box-sizing: border-box;
  30. -moz-box-sizing: border-box;
  31. box-sizing: border-box;
  32. }
  33. /* 标题 */
  34. h3 {
  35. font-size: 28px;
  36. line-height: 28px;
  37. color: $titleColor;
  38. letter-spacing: 2px;
  39. }
  40. /* 输入框默认样式 */
  41. input {
  42. border: 1px solid $borderColor;
  43. background-color: $rowColor;
  44. padding: 10px;
  45. width: 100%;
  46. min-width: 60px;
  47. &:focus {
  48. border-color: $color;
  49. }
  50. }
  51. /* 去除浏览器默认样式 */
  52. button,
  53. input {
  54. -webkit-appearance: none;
  55. -moz-appearance: none;
  56. appearance: none;
  57. outline: none;
  58. border-radius: 0;
  59. cursor: pointer;
  60. &:focus {
  61. outline: 0;
  62. }
  63. }
  64. /* a标签颜色 */
  65. a {
  66. color: $color;
  67. &:hover {
  68. color: $hoverColor;
  69. }
  70. }
  71. /* 去除 A 标签下划线 */
  72. a,
  73. a:active,
  74. a:hover {
  75. outline: 0;
  76. text-decoration: none;
  77. }
  78. /* 元素动画 */
  79. button,
  80. input,
  81. a {
  82. -moz-transition: ease-in-out 0.5s;
  83. -webkit-transition: ease-in-out 0.5s;
  84. -o-transition: ease-in-out 0.5s;
  85. -ms-transition: ease-in-out 0.5s;
  86. transition: ease-in-out 0.5s;
  87. }
  88. /* body 样式 */
  89. body {
  90. font-size: 12px;
  91. overflow-x: hidden;
  92. overflow-y: scroll;
  93. line-height: 24px;
  94. color: #718096;
  95. background-color: #f7fafc;
  96. font-family: "PingFang SC", "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  97. }
  98. /****************************************************
  99. 通用样式
  100. ****************************************************/
  101. /* 高度100% */
  102. html,
  103. body {
  104. height: 100%;
  105. }
  106. body {
  107. display: flex;
  108. justify-content: center;
  109. align-items: center;
  110. }
  111. /* 容器 */
  112. .container {
  113. background-color: #fff;
  114. box-shadow: 0 1px 6px rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  115. padding: 120px;
  116. border-radius: 6px;
  117. /* 提示 */
  118. .hint {
  119. margin-top: 30px;
  120. text-align: center;
  121. padding: 12px;
  122. background-color: $rowColor;
  123. color: $color;
  124. }
  125. }
  126. /* 按钮 */
  127. .button {
  128. border-radius: 4px;
  129. padding: 8px 20px;
  130. color: #ffffff;
  131. display: inline-block;
  132. /* 保存 */
  133. &.jump,
  134. /* 保存 */
  135. &.save,
  136. /* 编辑 */
  137. &.edit {
  138. background-color: $color;
  139. }
  140. /* 删除 */
  141. &.delete {
  142. background-color: $titleColor;
  143. }
  144. &:hover {
  145. background-color: $hoverColor;
  146. color: #ffffff;
  147. }
  148. }
  149. /****************************************************
  150. 通用样式 end
  151. ****************************************************/
  152. /****************************************************
  153. 表格
  154. ****************************************************/
  155. .user-table {
  156. border-top: 1px $borderColor solid;
  157. border-left: 1px $borderColor solid;
  158. width: 100%;
  159. border-spacing: 0;
  160. font-size: 12px;
  161. /* 表格标题 */
  162. caption {
  163. font-size: 32px;
  164. color: $titleColor;
  165. line-height: 36px;
  166. margin-bottom: 60px;
  167. }
  168. td,
  169. th {
  170. border-right: 1px $borderColor solid;
  171. border-bottom: 1px $borderColor solid;
  172. padding: 8px 16px;
  173. }
  174. /* 头部 */
  175. thead {
  176. background-color: $headerColor;
  177. }
  178. /*标题*/
  179. th {
  180. font-weight: bold;
  181. white-space: nowrap;
  182. font-size: 14px;
  183. color: $titleColor;
  184. }
  185. /* 隔行区分背景 */
  186. tbody tr:nth-child(2n) {
  187. background-color: $rowColor;
  188. }
  189. /* 按钮 */
  190. .button {
  191. margin: 0 3px;
  192. }
  193. }
  194. /****************************************************
  195. 表格 end
  196. ****************************************************/
  197. /****************************************************
  198. 分页
  199. ****************************************************/
  200. .pagination {
  201. margin-top: 30px;
  202. text-align: center;
  203. span,
  204. a {
  205. border: 1px solid $borderColor;
  206. min-width: 32px;
  207. height: 32px;
  208. display: inline-block;
  209. line-height: 32px;
  210. padding: 0 8px;
  211. border-radius: 4px;
  212. margin: 0 2px;
  213. }
  214. a {
  215. color: #718096;
  216. /* 当前页码和鼠标经过 */
  217. &.page {
  218. &:hover,
  219. &.active {
  220. color: #fff;
  221. background-color: $currentColor;
  222. border-color: $currentColor;
  223. }
  224. }
  225. }
  226. /* 页面跳转 */
  227. form.jump-page {
  228. display: inline-block;
  229. vertical-align: middle;
  230. input {
  231. width: 42px;
  232. height: 32px;
  233. }
  234. }
  235. }
  236. /****************************************************
  237. 分页 end
  238. ****************************************************/
  239. /****************************************************
  240. 表单
  241. ****************************************************/
  242. .edit-form {
  243. /* 表单 */
  244. form {
  245. min-width: 300px;
  246. }
  247. /* 模块 */
  248. div {
  249. margin-top: 12px;
  250. }
  251. /* 标题 */
  252. h3 {
  253. margin-bottom: 60px;
  254. text-align: center;
  255. }
  256. /* 按钮 */
  257. .save {
  258. width: 100%;
  259. padding: 12px;
  260. }
  261. }
  262. /****************************************************
  263. 表单 end
  264. ****************************************************/
  265. /****************************************************
  266. 删除用户
  267. ****************************************************/
  268. body.delete-user {
  269. a.delete {
  270. margin-top: 20px;
  271. width: 120px;
  272. display: block;
  273. margin: 20px auto 0;
  274. text-align: center;
  275. }
  276. }
  277. /****************************************************
  278. 删除用户 end
  279. ****************************************************/

演示地址

分页演示地址

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议