![[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
今晚学习了分页查询功能，与封装之后的调用，通过学习基本上已经可以写简单的分页查询，但是通过课后的尝试觉得自己在封装之后的调用存在一些问题。
分页查询的原理：1. LIMIT 参数的作用，2. 控制每页显示的数量，3. 接收GET参数,
偏移量的计算方法：(页数-1)*每页显示的数量；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>快速跳转查询</title>
<style>
table ,th ,td{
border: 1px solid black;
}
table th{
background-color: lightgreen;
}
table{
border-collapse: collapse;
width: 80%;
margin: 30px auto;
text-align: center;
}
table caption{
font-size: 1.5rem;
margin-bottom: 15px;
}
h3{
text-align: center;
}
h3 a{
text-decoration: none;
margin-left: 10px;
border: 1px solid black;
display: inline-block;
height: 30px;
min-width: 30px;
padding: 0 10px;
background-color: lightgreen;
}
h3 a:hover{
background-color: red;
color: white;
}
form {
display: inline;
}
img{
width: 100%;
}
</style>
</head>
<body>
<?php
//连接数据库获取到全部的记录
$pdo = new PDO('mysql:host=localhost;dbname=zmtzr','root','');
$pdo->query("set names utf8");
//手工修改url中的get参数可以实现翻页查询
$page = isset($_GET['p']) ? $_GET['p'] :1;
$offset = ($page-1)*3;
$sql = "SELECT * FROM `ss_article` LIMIT {$offset},3";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo '<pre>'.print_r($rows,'true').'</pre>';
/**
* 获取总页数分2步:
* 1.获取总记录数
* 2.再除以每次的显示数量,结果向上取整
*/
$stmt = $pdo->prepare("SELECT COUNT(*) FROM `ss_article`");
$stmt->execute();
$total = $stmt->fetchColumn(0);
$pages = ceil($total / 3);
?>
<table>
<caption>英雄榜单</caption>
<tr>
<th>ID</th>
<th>姓名</th>
<th>点赞数</th>
<th>图片</th>
<th>简介</th>
<th>上榜日期</th>
</tr>
<?php foreach ($rows as $row): ?>
<tr>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['title'] ?></td>
<td><?php echo $row['hits'] ?></td>
<td><img src="/0910/<?php echo $row['img'] ? $row['img'] : '/article/2018/0408/3d60ec9166717ec7fea9b496eca19487.jpg' ?>"></td>
<td><?php echo $row['intro'] ?></td>
<td><?php echo date("Y-m-d H:i:s",$row['last_time']); ?></td>
</tr>
<?php endforeach; ?>
</table>
<h3>
<!-- 当前是第一页的时候,上一页和首页链接应该不显示-->
<?php if ($page !=1):?>
<a href="demo4.php?p=1">首页</a>
<a href="demo4.php?p=<?php echo (($page-1)==0)? 1 :($page-1) ?>">上一页</a>
<?php endif;?>
<!--生成中间页码-->
<!--将当前页码的背景色锁定:当前页码等于GET中的参数p-->
<?php for ($i=1;$i<=$pages;$i++): ?>
<a href="demo4.php?p=<?php echo $i ?>" <?php echo ($i ==$page) ?'style="background-color:red"' :''; ?>><?php echo $i ?></a>
<?php endfor;?>
<!--当前已经是最后一页的时候,下一页和最后一页也应该不显示-->
<?php if ($page !=$pages): ?>
<a href="demo4.php?p=<?php echo (($page+1)>$pages) ?$pages :($page+1); ?>">下一页</a>
<a href="demo4.php?p=<?php echo $pages; ?>">尾页</a>
<?php endif; ?>
<!--实现页面的快速跳转-->
<form action="" method="get">
第
<select name="p" id="">
<?php for($i=1;$i<=$pages;$i++) :?>
<!-- 循环输出全部页码,并锁定当前页-->
<option value="<?php echo $i; ?>"<?php if ($page==$i){
echo 'selected';
} ?>>
<?php echo $i; ?>
</option>
<?php endfor;?>
</select>页
<button>跳转</button>
</form>
</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例