![[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
在线演示地址：http://www.pursuer.top/table/table.php
一、获取数据
1.链接数据库 $pdo = new PDO($dsn,$username,$password);
2.获取总页数 $sql = "SELECT CEIL(COUNT('book_id')/{$num}) FROM `books`";
3.指定查询的内容
偏移量 = 每页显示数量 * (当前页码 - 1)；
$sql = "SELECT `book_id`,`book_name`,`book_author`,`book_desc` FROM `books` LIMIT {$num} OFFSET {$offset}";
4.返回json格式数据 json_encode(['pages'=>$pages,'books'=>$books]);
<?php
// 接收页码值
$page = intval($_GET['p'] ? $_GET['p'] : 1);
// $page = intval($_GET['p'] ?? 1);
// $page = intval(3);
// print_r($page);
// 连接数据库
// $pdo = new PDO($dsn,$username,$password);
// $dsn = "type:host=localhost;dbname;
$pdo = new PDO('mysql:host=127.0.0.1;dbname=books','root','root');
// 每页显示数量
$num = 5;
// 获取页码数量,ceil()向上取整,count()数量
$sql = "SELECT CEIL(COUNT('book_id')/{$num}) FROM `books`";
// 执行sql语句并返回pdo预处理对象
$stmt = $pdo->prepare($sql);
// 执行结果
$stmt->execute();
// 获得页码数量,用于生成页码按钮
$pages = $stmt->fetchColumn(0);
// 偏移量 = 每页显示数量 * (当前页码 - 1)
$offset = $num * ($page - 1);
// 返回当页要显示的内容
$sql = "SELECT `book_id`,`book_name`,`book_author`,`book_desc` FROM `books` LIMIT {$num} OFFSET {$offset}";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$books = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 将数据以json格式返回前端
echo json_encode(['pages'=>$pages,'books'=>$books]);点击 "运行实例" 按钮查看在线实例
二、显示内容
1.获区ul页码区与tbody列表区，并设置当前页码 var p = <?=$_GET['p'] ?? 1?>;
2.创建请求，获取数据
3.解析后台传回的数据，并把内容遍历到表格内
4.事件委托，判断当前页码值并跳转到对应内容页；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style>
table{
margin:0 auto;
width:90%;
border-collapse: collapse;
}
td,th{
border:1px solid #373737;
text-align: center;
}
thead tr th{
background: #1495e7;
color:#fff;
}
#box{
width:90%;
margin:0 auto;
text-align: center;
}
ul{
list-style: none;
padding:0;
margin:10px auto;
overflow: hidden;
display: inline-block;
}
ul li{
min-width:21px;
padding:6px;
background-color:#888;
border-radius: 6px;
margin:0 4px;
float:left;
color: #fff;
}
.active{
background-color:#1495e7;
}
</style>
</head>
<body>
<table cellpadding="5">
<caption><h2>书单</h2></caption>
<thead>
<tr>
<th width="50">排序</th>
<th width="100">书名</th>
<th width="100">作者</th>
<th>简介</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="box">
<ul>
<li id="prev"><<</li>
<li id="next">>></li>
</ul>
</div>
</body>
</html>
<script>
// 获取内容区
var tbody = document.getElementsByTagName('tbody').item(0);
// 获取页码区
var ul = document.getElementsByTagName('ul').item(0);
// // 设置当前页码
// var p = <?php echo $_GET['p'] ?? 1 ?>;
var p = <?=$_GET['p'] ?? 1?>;
// var p = 2;
// 创建请求
var request = new XMLHttpRequest();
// 获取后台返回数据
window.addEventListener('load',showData,false);
function showData(){
// 监听回调
request.addEventListener('readystatechange',getData,false);
// 配置请求
request.open('GET','get.php?p='+p,true);
// 发送请求
request.send(null);
}
function getData(){
if (request.readyState === 4){
// 数据返回成功,解析json数据
var obj = JSON.parse(request.responseText);
var pages = obj['pages'];
var books = obj['books'];
// 遍历服务器传回内容
var str = '';
books.forEach(function (book) {
str += '<tr>' + '<td>' + book['book_id'] + '</td>' + '<td>' + book.book_name + '</td>' + '<td>' + book.book_author + '</td>' + '<td>' + book.book_desc + '</td>' + '</tr>';
});
// 将数据放到表格内
tbody.innerHTML = str;
for (var i = 1; i <= pages; i++) {
// 设置当前页码是否高亮?
var active = (i === p) ? 'active' : '';
ul.innerHTML += '<li class="'+ active +'">'+ i + '</li>';
}
ul.addEventListener('click',set_page,false);
function set_page(ev){
// 获取上一页与下一页按钮
var prev = document.getElementById('prev');
var next = document.getElementById('next');
// console.log(ev.target);
if(ev.target === prev){
(p-1)>0 ? location.search = '?p=' + (p-1) : location.search = '?p=1';
}else if(ev.target === next){
(p+1)<pages ? location.search = '?p=' + (p+1) : location.search = '?p=' + pages;
}else{
location.search = '?p=' + ev.target.innerText;
}
}
}
}
</script>点击 "运行实例" 按钮查看在线实例
