![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：你的效果图惊到我了
Collection
Collection
<?php// 连接数据库require 'connect.php';// 1. 当前的页数/页码$page = $_GET['p'] ?? 1;// 2. 每页显示的记录数量$num = 8;// 3. 总页数$sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `salary`";$pages = $pdo->query($sql)->fetch()['total'];// 4. 偏移量$offset = $num * ($page - 1);// 5. 分页数据$sql = "SELECT * FROM `salary` LIMIT {$num} OFFSET {$offset}";$salarys = $pdo->query($sql)->fetchAll();// print_r($salarys);?><!doctype html><html lang="en"><head><meta charset="UTF-8"><title>分页显示员工工资</title><style>* {margin: 0;padding: 0;box-sizing: border-box;color: #555;}body {display: flex;flex-direction: column;align-items: center;}/*表格样式*/table {width: 80%;border: 1px solid;border-collapse: collapse;text-align: center;}table caption {font-size: 1.2rem;margin: 10px;}table td,table th {border: 1px solid;padding: 5px;}table tr:hover {background-color: #eee;}table thead tr:only-of-type {background-color: lightblue;}table button {width: 56px;height: 26px;}table button:last-of-type {color: red;}table button {/* 光标呈现为指示链接的指针（一只手） */cursor: pointer;margin: 0 3px;}table button:first-of-type:hover {background-color: red;}table button:last-of-type:hover {background-color: yellow;}/*分页条样式*/body > p {display: flex;}p > a {text-decoration: none;color: #555;border: 1px solid;padding: 5px 10px;margin: 10px 2px;}.active {background-color: red;color: white;border: 1px solid red;}.show1, .show2 {display: none;}</style></head><body><table><caption>员工工资明细表</caption><thead><tr><th>ID</th><th>工号</th><th>姓名</th><th>入职日期</th><th>部门</th><th>岗位</th><th>工作天</th><th>工资</th><th>操作</th></tr></thead><tbody><?php foreach ($salarys as $salary) : ?><tr><td><?php echo $salary[id];?></td><td><?php echo $salary[msnv];?></td><td><?php echo $salary[name];?></td><td><?php echo date('Y-m-d', $salary['hiredate']) ?></td><td><?php echo $salary[donvi];?></td><td><?php echo $salary[congviec];?></td><td><?php echo $salary[ngaycong];?></td><td><?php echo $salary[salary];?></td>\<td><button onclick="location.href='handle.php?action=edit&id=<?php echo $salary['id'] ?>'">修改</button><button onclick="location.href='handle.php?action=delet&id=<?php echo $salary['id'] ?>'">删除</button></td></tr><?php endforeach; ?></tbody></table><!--分页--><p><!--设置省略--><?php// 1. 分页条显示7个页码$showPages = 7;// 2. 分页条的起始页码$startPage = 1;// 3. 分页条的终止页码$endPage = $pages; // 当前总页数:// 4. 分页条的偏移量: (当前分页条显示的页码数 - 1) / 2$offsetPage = ($showPages -1) / 2; // 3// 只有当前分页条数量 < 总页数, 才有必要显示出省略标记if ($showPages < $pages) {// 如果当前页 > 偏移量 + 1 , 应该显示...if ($page > $offsetPage + 1) {$startOmit = '...';}// 将当前分页条页码重置if ($page > $offsetPage) {$startPage = $page - $offsetPage;$endPage = $page + $offsetPage;if ($endPage > $pages) {$endPage = $pages;}} else {$startPage = 1;$endPage = $showPages;}// 如果当前页 + 偏移量 > 总页数if ($page + $offsetPage > $pages) {// 原理, 就是向当前页前面进行借位// 此时, 新的起点 = 当前位置 - (当前页 + 偏移量 - 原始位置)$startPage = $startPage - ($page + $offsetPage - $endPage);}if ($showPages < $pages && $page + $offsetPage < $pages) $endOmit = '...';}?><?php// 设置当在第一页和最后一页时不显示首页、上一页 或 尾页 下一页$show1 = ($page == 1) ? 'show1' :null;$show2 = ($page == $pages) ? 'show2' :null;?><!--首页--><a href="<?php echo $_SERVER['PHP_SELF'] . '?p=1' ?>" class="<?php echo $show1; ?>">首页</a><!--上一页--><?php$prev = $page - 1;// 如果已经第1页，则定在第1页if ($page == 1) $prev = 1;?><a href="<?php echo $_SERVER['PHP_SELF'] . '?p =' .$prev ?>" class="<?php echo $show1; ?>">上一页</a><!--省略--><?php if (isset($startOmit)) : ?> <a href="#"><?php echo $startOmit ?></a> <?php endif ?><?php for ($i = $startPage; $i <= $endPage; $i++) : ?><?php$jump = sprintf('%s?p=%s', $_SERVER['PHP_SELF'], $i);$active = ($i == $page) ? 'active' :null;?><a href="<?php echo $jump ?>" class="<?php echo $active ?>"><?php echo $i ?></a><?php endfor; ?><!--省略--><?php if (isset($endOmit)) : ?> <a href="#"><?php echo $endOmit ?></a> <?php endif ?><!--下一页--><?php$next = $page + 1;// 如果已经最后一页，则定在最后一页if ($page == $pages) $next = $pages;?><a href="<?php echo $_SERVER['PHP_SELF'] . '?p=' .$next ?>" class="<?php echo $show2; ?>">下一页</a><!--尾页--><a href="<?php echo $_SERVER['PHP_SELF'] . '?p=' .$pages ?>" class="<?php echo $show2; ?>">尾页</a></p><!--跳转指定页--><form name="form" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"><input name="p" type="number" size="3" min="1" max="<?php echo $pages; ?>"><input type="submit" value="跳转"><a href="<?php echo $_SERVER['PHP_SELF'] . '?p=' .$_GET['p'] ?>"></a></form><script>function delet(id){if(confirm("是否删除?")){return "location.href='handle.php?action=delet&id=<?php echo $salary['id'] ?>";}return false;}</script></body></html>
// 修改表单代码<?php// 获取要被编辑的员工信息$salary = $pdo->query("SELECT * FROM `salary` WHERE `id`={$id}")->fetch();// print_r($salary);?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>调整员工工资</title></head><body><h3>调整员工信息</h3><form action="<?php echo $_SERVER['PHP_SELF'].'?action=doedit&id='. $id ?>" method="post"><p><label for="msnv">工号：</label><input type="text" id="msnv" name="msnv" value="<?php echo $salary['msnv'] ?>"></p><p><label for="name">姓名：</label><input type="text" id="name" name="name" value="<?php echo $salary['name'] ?>"></p><p><label for="hiredate">入职日期:</label><input type="text" id="hiredate" name="hiredate" value="<?php echo date('Y-m-d', $salary['hiredate']) ?>"></p><p><label for="donvi">部门：</label><input type="text" id="donvi" name="donvi" value="<?php echo $salary['donvi'] ?>"></p><p><label for="congviec">岗位：</label><input type="text" id="congviec" name="congviec" value="<?php echo $salary['congviec'] ?>"></p><p><label for="ngaycong">工作天：</label><input type="text" id="ngaycong" name="ngaycong" value="<?php echo $salary['ngaycong'] ?>"></p><p><label for="salary">工资：</label><input type="text" id="salary" name="salary" value="<?php echo $salary['salary'] ?>"></p><input type="hidden" name="id" value="<?php echo $salary['id'] ?>"><p><button>保存</button></p></form></body></html>// 控制器代码<?phprequire 'connect.php';$action = $_GET['action'];$id = $_GET['id'];switch ($action) {// 编辑需要进行二步// 1. 渲染编辑表单case 'edit':include 'edit.php';break;// 2. 执行修改操作case 'doedit':$sql = 'UPDATE `salary` SET `msnv`=:msnv, `name`=:name, `hiredate`=:hiredate, `donvi`=:donvi,`congviec`=:congviec,`ngaycong`=:ngaycong ,`salary`=:salary WHERE `id`=:id;';// print_r($_POST);// $_POST['id'] = $id;$_POST['hiredate'] = strtotime($_POST['hiredate']);// print_r($_POST);$stmt = $pdo->prepare($sql);$stmt->execute($_POST);// $stmt->debugDumpParams();if ($stmt->rowCount() === 1) echo '<script>alert("更新成功");location.href="demo1.php";</script>';// 3. 删除case 'delet':// echo $id;$stmt = $pdo->query("DELETE FROM `salary` WHERE `id`=$id");if ($stmt->rowCount() === 1) echo '<script>alert("删除成功");location.href="demo1.php";</script>';break;}
起始页、结束页、偏移量，只要完全掌握住这三点，其它问题就不大了。