![[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、后端读取数据：get_details.php
<?php
// 获取当前要显示的页数
$page = intval($_GET['p'] ?? 1);
include __DIR__ . '/inc/connect.php';
// 每页显示的数量
$num = 2;
// 总页数：需要分两步，第一求出总记录数，第二总记录数除以每页显示的记录数量，再向上取整
$sql = "SELECT CEIL(COUNT(`pro_id`)/{$num}) FROM `product`";
$stmt = $pdo->prepare($sql);
$stmt ->execute();
// 总页数
$pages = $stmt->fetchColumn(0);
//var_dump($pages);
// 判断url中参数p的大小，防止报错
if( $page > $pages ){
$page = $pages;
}else if ( $page < 1 ){
$page = 1;
}
// 每页的显示起止位置：偏移量
// 偏移量 = 当前显示数据 * （当前页面 - 1）
$offset = $num * ($page - 1);
// concat 返回结果为连接参数产生的字符串
$sql = "SELECT `pro_id`,`name`, CONCAT(left(`info`,20),'...') AS `info` FROM `product` LIMIT {$num} OFFSET {$offset}";
$stmt = $pdo ->prepare($sql);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo $pages;
echo json_encode(['pages'=>$pages, 'products'=>$products]);2、前端显示页面：index.php
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表页面</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
}
thead > tr{
background-color: lightblue;
}
ul, li {
padding: 0;
margin: 5px auto;
list-style: none;
text-align: center;
overflow: hidden;
float: left;
}
li {
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
margin-left: 3px;
}
li:hover {
background-color: lightblue;
cursor: pointer;
}
a{width: 50px; float: left; margin: 10px 0 5px 3px; border: 1px solid black; color: black; text-decoration: none;}
/*设置当前页高亮样式*/
.active {
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<caption>动态列表</caption>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<!-- 动态列表-->
</tbody>
</table>
<!--分页-->
<a href="" style="display: none">aaaa</a>
<div style="text-align: center; height: 40px;">
<a href="" id="pre">上一页</a>
<ul>
</ul>
<a href="" id="next">下一页</a>
</div>
<script>
// 获取表格显示区
var tbody = document.getElementsByTagName('tbody').item(0);
// 获取页面显示去
var ul = document.getElementsByTagName('ul').item(0);
// 当前页码：默认显示第一页
//var p = 1;
var p = <?=$_GET['p'] ?? 1 ?>;
// 创建Ajax对象
var request = new XMLHttpRequest();
// 监听文档的load事件，在页面加载完成后通过Ajax方式获取数据
window.addEventListener('load', showData, false);
// load 事件方法
function showData() {
// 监听Ajax成功回调
request.addEventListener('readystatechange', getData, false);
// 配置请求
request.open('GET', 'get_details.php?p=' + p, true);
// 发送请求
request.send(null);
}
function getData() {
if(request.readyState === 4){
// console.log(request.responseText);
// 1、获取Ajax返回的数据并解析为js变量
var obj = JSON.parse(request.responseText);
var pages = obj['pages'];
var products = obj['products'];
// 2、生成表格数据
var str = '';
products.forEach(function (detail) {
str += '<tr>';
str += '<td>' + detail['pro_id'] + '</td>';
str += '<td>' + detail['name'] + '</td>';
str += '<td>' + detail['info'] + '</td>';
});
// 将数据添加到表格中
tbody.innerHTML = str;
// 3、生成页码
for (var i=1; i<= pages; i++){
// 设置当前页面是否高亮
var active = ( i === p ) ? 'active' : '';
ul.innerHTML += '<li class="'+ active +'" >' + i +'</li>'
}
// 上一页、下一页设置
var pre = document.getElementById('pre');
var next = document.getElementById('next');
if( p < 1){
// document.getElementById('pre').href ="index.php?p=1";
pre.style.display = "none";
next.href ="index.php?p=2";
}else if( p === 1){
// pre.href ="index.php?p=1";
pre.style.display = "none";
next.href ="index.php?p="+ (p+1) +"";
}else if( p > 1 && p < pages ){
pre.href ="index.php?p="+ (p-1) +"";
next.href ="index.php?p="+ (p+1) +"";
}else if( p <= pages ){
pre.href ="index.php?p="+ (p-1) +"";
// next.href ="index.php?p="+ p +"";
next.style.display = 'none';
}else {
pre.href ="index.php?p="+ (pages-1) +"";
// next.href ="index.php?p="+ pages +"";
next.style.display = 'none';
}
}
}
// 给页面添加点击事件
ul.addEventListener('click', set_page, false);
function set_page(ev) {
console.log(ev.target.innerText);
location.search = '?p=' + ev.target.innerText;
}
</script>
</body>
</html>效果：
1、当第一页时，上一页隐藏、下一页显示
2、当第三页时，上一页、下一页均显示
3、当最后一页时，上一页显示、下一页隐藏
4、当输入页码大于最大页码时，显示最后一页、且下一页隐藏
5、当输入页码小于1时，显示下一页、且上一页隐藏
