![[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 'demo1.php' ;// 连接数据库require 'connect.php';// 1. 当前的页数/页码$page = $_GET['p'] ?? 1;// 2. 每页显示的记录数量$num = 5;// 3. 总页数$sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `goods`";$pages = $pdo->query($sql)->fetch()['total'];// 4. 偏移量$offset = $num * ($page - 1);// 5. 分页数据$sql = "SELECT * FROM `goods` LIMIT {$num} OFFSET {$offset}";$goods = $pdo->query($sql)->fetchAll();?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分页数据展示</title><link rel="stylesheet" href="style.css"></head><body><table><caption>材料管理系统</caption><thead><tr><th>ID</th><th>名称</th><th>规格</th><th>描述</th><th>数量</th><th>单位</th><th>操作</th></tr></thead><tbody><?php foreach ($goods as $good) : ?><tr><td><?php echo $good['id'] ?></td><td><?php echo $good['name'] ?></td><td><?php echo $good['DN'] ?></td><td><?php echo $good['describe'] ?></td><td><?php echo $good['number'] ?></td><td><?php echo $good['unit'] ?></td><td><button onclick="location.href='server.php?action=edit&id=<?php echo $good['id'] ?>'">编辑</button><button onclick="del(<?php echo $good['id'] ?>)">删除</button></td></tr><?php endforeach; ?></tbody></table><!-- 添加跳转到首页, 前一页, 下一页, 尾页的功能 --><p><?php// 1. 分页条显示5个页码$showPages = 5;// 2. 分页条的起始页码$startPage = 1;// 3. 分页条的终止页码$endPage = $pages; // 当前总页数: 14// 4. 分页条的偏移量: (当前分页条显示的页码数 - 1) / 2$offsetPage = ($showPages -1) / 2; // 2// 只有当前分页条数量 < 总页数, 才有必要显示出省略标记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 = '...';}?><!-- 首页 --><a href="<?php echo $_SERVER['PHP_SELF'] . '?p=1' ?>">首页</a><!-- 前一页 --><?php$prev = $page - 1;if ($page == 1) $prev = 1;?><a href="<?php echo $_SERVER['PHP_SELF'] . '?p=' . $prev ?>">前一页</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 ?>">下一页</a><!-- 尾页 --><a href="<?php echo $_SERVER['PHP_SELF'] . '?p='. $pages ?>">尾页</a></p><p><!-- 直接跳转 --><form id="topage" action="fenye.php" method="get"><label for="p">跳转到：</label><input id='p' type="text" name='p'><input type="submit" value="跳转" form="topage"></form></p><script>function del(id) {return confirm('是否删除?') ? alert('删除成功') : false;}</script></body></html>
分页的原理就是根据总数据条数和每页显示的条数计算出要分多少页，然后再计算出偏移量，根据偏移量进行查询数据并展示
