search

博客列表 >分页功能，用户信息表的编辑与删除功能-php-32课8.3

分页功能，用户信息表的编辑与删除功能-php-32课8.3

希望
希望原创
2020年08月05日 18:50:52748浏览

一、简单的分页功能

1.与数据库连接，connect.php

  1. <?php
  2. $pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'melinda123');
  3. // 设置结果默认获取方式: 关联数组
  4. $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

2.获取分页数据：每页显示的数量，计算总页数，page-data.php

  1. <?php
  2. // 连接数据库
  3. require 'connect.php';
  4. // 1. 每页显示10条数
  5. $num = 10;
  6. // 2. 当前页码,默认为1
  7. $page = $_GET['p'] ?? 1;
  8. // 3. 计算每一页的第一条记录的显示偏移量
  9. $offset = ($page - 1) * $num;
  10. // 4. 获取分页数据
  11. $sql = "SELECT * FROM `users` LIMIT {$num} OFFSET {$offset}";
  12. // 简写
  13. $users = $pdo->query($sql)->fetchAll();
  14. // 总页数 =  ceil(记录总数 / 每页的记录数)
  15. $sql = "SELECT CEIL(COUNT(`id`)/{$num})  AS `total` FROM `users`";
  16. // 计算总页数
  17. $pages = $pdo->query($sql)->fetch()['total'];

3.用户信息表数据展示，page-list.php

  1. <?php require 'page-data.php' ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>数据展示</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <table>
  12.         <caption>用户信息表</caption>
  13.         <thead>
  14.             <tr>
  15.                 <td>id</td>
  16.                 <td>name</td>
  17.                 <td>email</td>
  18.                 <td>操作</td>
  19.             </tr>
  20.         </thead>
  21.         <tbody>
  22.             <?php foreach ($users as $user):?>
  23.                 <tr>
  24.                      <!-- 短标签来简化变量的显示 -->
  25.                     <td><?=$user['id']?></td>
  26.                     <td><?php echo $user['name'] ?></td>
  27.                     <td><?=$user['email']?></td>
  28.                     <td><button>编辑</button><button>删除</button></td>
  29.                 </tr>
  30.             <?php endforeach ?>
  31.         </tbody>
  32.     </table>
  33. </body>
  34. </html>

4.信息表样式，style.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   color: #555;
  6. }
  8. body {
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  12. }
  14. /*表格样式*/
  15. table {
  16.   width: 80%;
  17.   border: 1px solid;
  18.   border-collapse: collapse;
  19.   text-align: center;
  20. }
  22. table caption {
  23.   font-size: 1.2rem;
  24.   margin: 10px;
  25. }
  26. table td,
  27. table th {
  28.   border: 1px solid;
  29.   padding: 5px;
  30. }
  32. table tr:hover {
  33.   background-color: #eee;
  34. }
  36. table thead tr:only-of-type {
  37.   background-color: lightblue;
  38. }
  40. table button {
  41.   width: 56px;
  42.   height: 26px;
  43. }
  44. table button:last-of-type {
  45.   color: red;
  46. }
  47. table button {
  48.   cursor: pointer;
  49.   margin: 0 3px;
  50. }
  51. /*分页条样式*/
  52. body > p {
  53.   display: flex;
  54. }
  56. p > a {
  57.   text-decoration: none;
  58.   color: #555;
  59.   border: 1px solid;
  60.   padding: 5px 10px;
  61.   margin: 10px 2px;
  62. }
  64. .active {
  65.   background-color: red;
  66.   color: white;
  67.   border: 1px solid red;
  68. }

5.数据展示并做简单的分页，demo1.php

  1. <?php require 'page-data.php' ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>数据展示</title>
  8.     <link rel="stylesheet" href="style.css">
  10. </head>
  11. <body>
  12.     <table>
  13.         <caption>用户信息表</caption>
  14.         <thead>
  15.             <tr>
  16.                 <td>id</td>
  17.                 <td>name</td>
  18.                 <td>email</td>
  19.                 <td>操作</td>
  20.             </tr>
  21.         </thead>
  22.         <tbody>
  23.             <?php foreach ($users as $user):?>
  24.                 <tr>
  25.                      <!-- 短标签来简化变量的显示 -->
  26.                     <td><?=$user['id']?></td>
  27.                     <td><?php echo $user['name'] ?></td>
  28.                     <td><?=$user['email']?></td>
  29.                     <td><button>编辑</button><button>删除</button></td>
  30.                 </tr>
  32.             <?php endforeach ?>
  33.         </tbody>
  34.     </table>
  35.     <p>
  36.         <!-- 1. 分页条的动态生成
  37.         2. 跳转地址的动态生成
  38.         3. 当前页码的高亮显示 -->
  39.         <!-- 分页条中的页码应该动态生成 -->
  40.         <?php for ($i = 1; $i <= $pages; $i++): ?>
  41.             <?php
  42.                 $jump = sprintf('%s?p=%s',$_SERVER['PHP_SELF'], $i);
  43.                 // $i: 分页中的页码
  44.                 // $page: 在URL中通过GET获取的页码?p=X
  45.                 // 把active值变量化，判断高亮，空不亮，当前页和url的页一样时就显示高亮
  46.                 $active = ($i == $page) ? 'active' : null;
  47.             ?>
  48.         <a href="<?=$jump?>" class="<?=$active?>"><?=$i?></a>
  49.         <?php endfor ?>
  50.     </p>
  51. </body>
  52. </html>

二、用户信息表的编辑与删除功能

1.建立一个编辑页面，edit.php

  1. <?php
  2. // 获取要被编辑的数据
  3. $user = $pdo->query("SELECT * FROM `users` WHERE `id`={$id}")->fetch();
  4. // print_r($user);
  5. ?>
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.     <meta charset="UTF-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>用户编辑</title>
  12. </head>
  13. <body>
  14.     <h3>用户编辑</h3>
  15.     <!-- 用户编辑完成后，做一个跳转 -->
  16.     <form action="<? echo $_SERVER['PHP_SELF']. '?action=doedit&id='.$id?>" method="POST">
  17.         <p>
  18.             <label for="name">用户名:</label>
  19.             <input type="text" name="name" id="name" value="<?=$user['name']?>">
  20.         </p>
  21.         <p>
  22.             <label for="email">邮箱:</label>
  23.             <input type="email" name="email" id="email" value="<?=$user['email']?>">
  24.         </p>
  25.         <p>
  26.             <button>保存</button>
  27.         </p>
  28.     </form>
  29. </body>
  30. </html>

2.获取操作,并执行编辑与删除，handle.php

  1. <?php
  2. require 'connect.php';
  3. // 获取操作
  4. $action = $_GET['action'];
  5. $id = $_GET['id'];
  7. switch ($action) {
  8.     // 编辑操作： 1: 渲染编辑表单; 2. 执行编辑操作
  9.     // 1: 渲染编辑表单
  10.     case 'edit':
  11.         // 加载,渲染数据编辑表单
  12.         include 'edit.php';
  13.     break;
  14.     // 2. 执行编辑操作
  15.     case 'doedit':
  16.         // 更新
  17.         $sql = 'UPDATE `users` SET `name`=?, `email`=? WHERE `id`=?';
  18.         $stmt = $pdo->prepare($sql);
  20.         // 新的数据在$_POST
  21.         if (!empty($_POST)) {
  22.         // 用户编辑完成后，做一个跳转，获取数据，execute方法传参
  23.             $stmt->execute([$_POST['name'], $_POST['email'], $id]);
  24.             if ($stmt->rowCount() == 1) echo '<script>alert("更新成功");location.href="demo2.php"</script>';
  25.         }
  26.     break;
  27.     // 删除,配合demo2.php
  28.     case 'delete':
  29.         $sql = "DELETE FROM `users` WHERE `id`=?";
  30.         $stmt = $pdo->prepare($sql);
  31.         $stmt->execute([$id]);
  32.         if ($stmt->rowCount() == 1) 
  33.         {
  34.             echo "<script>alert('删除成功');location.href='demo2.php'</script>";
  35.         }
  36.     break;
  37. }

3.用户信息表数据展示，实现编辑与删除，demo2.php

  1. <?php require 'page-data.php' ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>数据展示</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <table>
  12.         <caption>用户信息表</caption>
  13.         <thead>
  14.             <tr>
  15.                 <td>id</td>
  16.                 <td>name</td>
  17.                 <td>email</td>
  18.                 <td>操作</td>
  19.             </tr>
  20.         </thead>
  21.         <tbody>
  22.             <?php foreach ($users as $user):?>
  23.                 <tr>
  24.                      <!-- 短标签来简化变量的显示 -->
  25.                     <td><?=$user['id']?></td>
  26.                     <td><?php echo $user['name'] ?></td>
  27.                     <td><?=$user['email']?></td>
  28.                     <td>
  29.                         <button onclick="location.href='handle.php?action=edit&id=<?=$user['id']?>'">编辑</button>
  31.                     <button onclick="del(<?=$user['id']?>)">删除</button></td>
  32.                 </tr>
  33.             <?php endforeach ?>
  34.         </tbody>
  35.     </table>
  37.     <p>
  38.         <!-- 1. 分页条的动态生成
  39.         2. 跳转地址的动态生成
  40.         3. 当前页码的高亮显示 -->
  41.         <!-- 分页条中的页码应该动态生成 -->
  43.         <!-- 继续完善分页功能
  44.         1. 首页
  45.         2. 尾页
  46.         3. 上一页
  47.         4. 下一页 -->
  49.         <!-- 上一页: 解决页码的越界 -->
  50.         <?php
  51.         // 获取上一页的页码
  52.         $prev = $page -1;
  53.         // 解决越界问题
  54.         if ($page == 1) $prev =1;
  55.         ?>
  56.         <?php if ($page != 1): ?>
  57.              <!-- 首页 -->
  58.         <a href="<?=$_SERVER['PHP_SELF'].'?p=1'?>">首页</a>
  59.         <a href="<?=$_SERVER['PHP_SELF'].'?p='.$prev?>">上一页</a>
  60.         <?php endif ?>
  61.         <?php for ($i = 1; $i <= $pages; $i++): ?>
  62.             <?php
  63.                 $jump = sprintf('%s?p=%s',$_SERVER['PHP_SELF'], $i);
  64.                 // $i: 分页中的页码
  65.                 // $page: 在URL中通过GET获取的页码?p=X
  66.                 $active = ($i == $page) ? 'active' : null;
  67.             ?>
  68.         <a href="<?=$jump?>" class="<?=$active?>"><?=$i?></a>
  69.         <?php endfor ?>
  70.           <!-- 下一页: 解决页码的越界 -->
  71.           <?php
  72.         // 获取下一页的页码
  73.         $next = $page + 1;
  74.         if ($next >= $pages) $next = $pages;
  75.         ?>
  76.         <?php if ($page != $pages) :?>
  77.             <a href="<?=$_SERVER['PHP_SELF'].'?p='.$next ?>">下一页</a>
  78.             <!-- 尾页，当前页，也就是pages -->
  79.             <a href="<?=$_SERVER['PHP_SELF'].'?p='.$pages?>">尾页</a>
  80.             <?php endif ?>
  81.     </p>
  82.     <script>
  83.         // 删除，配合handle.php
  84.         function del(id) {
  85.             var isDelete = confirm('确定删除？')
  86.             if (isDelete) {
  87.                 location.href = 'handle.php?action=delete&id='+id;
  88.             }else{
  89.                 return false;
  90.             }
  91.         }
  92.     </script>
  93. </body>
  94. </html>
  • 总结：
  • 分布功能，能够实现上一页和下一页跳转，来处理数以万计的数据库数据，并展示出来，让页面整洁
  • 信息表的编辑与删除功能，方便后期管理和维护，更加便捷
上一条：laravel--新建模型--实现前台用户登录验证下一条：MVC模式实现数据库查询（优化）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多