![[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
趁这周末有空，完成了一下分页作业，代码整合到一个文件里来，按自己思路写的时候总体来说没什么问题，但重置分页页码那里一直没想出来。后来结合老师的代码才慢慢弄出来。
最终演示网址：演示网址
<?phpnamespace page;use Exception;use PDO;try{$dns = 'mysql:host=localhost;port=3306;dbname=learn;charset=utf8';$pdo = new \PDO($dns,'****','****');} catch (Exception $e) {echo $e->getMessage();}// 获取记录数$sql = "select count(`id`) as total from user";$total = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);$num = 5; // 设置每页条数// $page = $_GET['page'] ?? 1; //获取当前页(服务器装的php5，不支持这种写法)$page = isset($_GET['page']) ? $_GET['page'] : 1; //获取当前页$page = (int)$page; // 在这不知能否过滤一些攻击$pages = ceil($total[0]['total']/$num); // 计算总页数/最后一页数$page = $page > $pages ? $pages : $page; // 当前页不能大于总页数，否则当前页为最后一页$page = $page <= 1 ? 1 : $page; // 当前页不能小于1，否则当前页为第一页$offset = $num * ($page - 1); // 计算偏移量，记录数 *（ 当前页 - 1 ）$sql = "select * from user limit {$num} offset {$offset}";$data = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);?><!DOCTYPE html><html lang="ZH"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分页</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"><style>.active { color: red; }</style></head><body><table class="table"><thead><tr><th>id</th><th>姓名</th><th>年龄</th><th>性别</th><th>工资</th><th>出生日期</th></tr></thead><tbody><?php foreach($data as $key => $value): ?><tr><td><?php echo $value['id']; ?></td><td><?php echo $value['name']; ?></td><td><?php echo $value['age']; ?></td><td><?php echo ($value['sex'] == 1) ? '男' : '女'; ?></td><td><?php echo $value['salary']; ?></td><td><?php echo date('Y-m-d',$value['createtime']); ?></td></tr><?php endforeach; ?></tbody></table><?php/*** 此段php用来省略页码数量*/// $page 当前页// $pages 总页数/最后一页$showPage = 5; // 分页条显示多少页，只能设置奇数$startPage = 1; // 分页条起始页$endPage = $pages; // 分页条结束页$sitePage = ($showPage - 1) / 2; // 分页条当前页的两边显示的页数，如，当前显示5页，当前页的左右两侧各显示两页（偏移量）// 当显示页数小于总页数当时候才显示`...`if ( $showPage < $pages ) {// 若当前页大于左边页数+1，左边显示`...`if ( $page > $sitePage + 1 ) { $startSign = '...'; }// 若当前页+右边页数小于总页数，右边显示`...`if ( $page + $sitePage < $pages ) { $endSign = '...'; }// 重置分页页码if ( $page > $sitePage ) { // 如果当前页大于左侧$sitePage个页码（不知道为什么这个作为条件），即左侧从加`...`开始$startPage = $page - $sitePage; // 重置起始页$endPage = $page + $sitePage; // 重置结束页if ( $endPage > $pages ) { $endPage = $pages; } // 上一步重置结束页后，产生多出来的结束页，去掉，使最大结束页不超过总页数。} else {$endPage = $showPage; // 重置最前的$sitePage个页码的结束页，否则会将全部页码显示出来。}// 解决最后的$sitePage个页码显示不够$showPage个页码问题if ( $page + $sitePage > $pages ) {// 此时, 新的起点 = 当前位置 - (当前页 + 偏移量 - 原始位置)$startPage = $startPage - ( $page + $sitePage -$endPage );}}?><div class="page" style="text-align: center"><!-- 上一页 --><?php if($page != 1): ?><?php$prev = ($page-1 <= 1 ) ? 1 : $page-1;$prev = sprintf('%s?page=%s',$_SERVER['PHP_SELF'], $prev)?><a href="<?php echo $_SERVER['PHP_SELF'] . "?page=1"; ?>">首页</a><a href="<?php echo $prev; ?>">上一页</a><?php endif ?><!-- 前省略`...` --><?php if(isset($startSign)): ?><a href="#"><?php echo $startSign; ?></a><?php endif ?><!-- 主体页码 --><?php for($i=$startPage;$i<=$endPage;$i++): ?><?php$href = sprintf('%s?page=%s',$_SERVER['PHP_SELF'], $i);$active = ( $page == $i ) ? 'active' : '';?><a href="<?php echo $href; ?>" class="<?php echo $active; ?>"><?php echo $i; ?></a><?php endfor ?><!-- 后省略`...` --><?php if(isset($endSign)): ?><a href="#"><?php echo $endSign; ?></a><?php endif ?><!-- 下一页 --><?php if($page != $pages): ?><?php$next = ($page+1 >= $pages ) ? $pages : $page+1;$next = sprintf('%s?page=%s', $_SERVER['PHP_SELF'], $next)?><a href="<?php echo $next; ?>">下一页</a><a href="<?php echo $_SERVER['PHP_SELF'] . "?page=" . $pages; ?>">尾页</a><?php endif ?><!-- 跳转功能 --><form action="" method="get"><input type="text" name="page"><input type="submit" value="跳转"></form></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script></body></html>
