![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
分页原理
基本术语
记录索引: 记录在表中的位置,从0开始(与主键无关)
偏移量: 每页显示的起始位置
显示数量: 每页默认的显示数量
2. SQL中的分页关键字
`LIMIT m OFFSET n`
`LIMIT m`: 每页显示的记录数量
`OFFSET n`: 从指定的索引n开始显示
3. 偏移量计算公式
offset = num * (page - 1)
总结
比如数据库用100条数据
每一次访问的时候只获取10条,我们就获取数据的时候设置只获取0-9的数据,第二页的时候获取10-19的数据.....
这时我们需要计算偏移量,公式就是这个 offset = num * (page - 1)
简单点来说就是
偏移量 = 当前显示数量 * (当前页码 - 1)
<?php
// 获取当前要显示的页数
$page = intval($_GET['p']);
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
// 每页显示数量
$num = 5;
// 总页数: 需要分二步, 第一求出总记录数量, 第二总记录数量除以每页显示的记录数量,再向上取整
$sql = "SELECT CEIL(COUNT(`mov_id`)/{$num}) FROM `movies`";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$pages = $stmt->fetchColumn(0);
// 每页的显示起止位置: 偏移量
// 偏移量 = 当前显示数量 * (当前页码 - 1)
$offset = $num * ($page - 1);
$sql = "SELECT `mov_id`,`name`, CONCAT(LEFT(`detail`,20),'...') FROM `movies` LIMIT {$num} OFFSET {$offset} ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode([$pages, $result]);点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最新影视剧介绍</title>
<style>
/*设置表格样式*/
table
{
/*折叠表格线与单元格之间的间隙*/
border-collapse:collapse;
width: 90%;
}
/*设置表格与单元格边框*/
table,th, td
{
border: 1px solid black;
}
/*设置标题行背景色*/
table thead tr:first-of-type {
background-color: lightblue;
}
/*设置每一列的宽度*/
table tbody tr td:nth-of-type(1) {
width: 10%;
}
table tbody tr td:nth-of-type(2){
width: 20%;
}
table tbody tr td:nth-of-type(3) {
width: 70%;
}
/*设置分页条样式*/
ul {
text-align: center;
}
ul li {
/*去掉默认样式*/
list-style-type: none;
/*转为水平显示*/
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
/*垂直水平居中*/
text-align: center;
line-height: 20px;
cursor: pointer;
margin-left: 5px;
}
ul li:hover {
background-color: lightblue;
border: 1px solid red;
}
/*作业: 如何设置当前页码的高亮?*/
.active {
background-color: lightblue;
border: 1px solid red;
}
</style>
</head>
<!-- isset($_GET['p'] ? $_GET['p'] : 1 -->
<body onload="getData(<?php echo $_GET['p'] ?? 1; ?>)">
<table>
<caption>最新影视剧介绍</caption>
<thead>
<tr>
<th>序号</th>
<th>片名</th>
<th>简介</th>
</tr>
</thead>
<!-- tr*5>td{x}*3-->
<tbody>
</tbody>
</table>
<!--分页条-->
<ul>
</ul>
<script>
function getData(p) {
// 创建 Ajax对象
var request = new XMLHttpRequest();
// 监听请求
request.onreadystatechange = function () {
// 请求成功
if (request.readyState === 4) {
var data = JSON.parse(request.responseText);
console.log(data);
// 1. 动态显示分页条
var ul = document.getElementsByTagName('ul').item(0);
for (var i = 0; i < data[0]; i++) {
var li = document.createElement('li');
li.innerText = (i+1);
// 设置当前页面高亮,p是Number,需要转String才可以比较
li.className = (li.innerText === p.toString()) ? 'active' : null;
// 动态显示数据
li.onclick = function () {
var search = location.search.slice(0,3) + this.innerText;
location.replace(search); //替换当前请求
};
// 将表格内容渲染到页面中...
ul.appendChild(li);
}
// 2. 显示当前页内容
var tbody = document.getElementsByTagName('tbody').item(0);
console.log(data[1]);
data[1].forEach(function (value){
console.log(value);
var tr = document.createElement('tr');
for (var key in value) {
var td = document.createElement('td');
td.innerText = value[key];
tr.appendChild(td);
}
tbody.appendChild(tr);
});
}
};
// 配置请求
request.open('GET', 'get_movies.php?p='+p.toString(), true);
// 发送请求
request.send(null);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例