分页功能如下：
- 数据分页显示，每页显示若干条数据，默认当前页码为第一页。例如：每页5条数据，则第一页显示 1-5 条，第二页显示 6-10 条，依此类推。
- 当页码为第一页时，上一页为禁用状态，点击无任何变化。
- 当页码为最后一页时，下一页为禁用状态，点击无任何变化。
- 正确显示当前页数和总页数。
首先，要显示的数据如下：
// 课外书列表
const bookList = [{
"name": "带你从入门到实战全面掌握 uni-app",
"price": 8900
},
{
"name": "初中级前端工程师面试宝典",
"price": 4900
},
{
"name": "微信公众号开发入门",
"price": 3900
},
{
"name": "从零入门 React 通关指北",
"price": 8900
},
{
"name": "Flask 框架基础",
"price": 9800
},
{
"name": "JavaScript 从零构建音乐播放器",
"price": 8900
},
{
"name": "微信小程序开发入门",
"price": 1490
},
{
"name": "SpringBoot+Thymeleaf 开发 BBS 论坛",
"price": 13900
},
{
"name": "Vue.js 3 + Node.js 实现线上聊天室",
"price": 8800
},
{
"name": "Express.js 实现前后端分离的博客系统",
"price": 8900
},
{
"name": "经典项目：前后端分离网盘系统实战",
"price": 8900
},
{
"name": "21 个实验带你快速开发 Django 博客系统",
"price":1000
},
{
"name": "React Hook 打造精美在线记账本",
"price": 8900
},
{
"name":'红楼梦',
"price": 5900
},
{
"name": "Three.js 在网页中创建 3D 动画",
"price": 6400
},
{
"name": "Web 前端高级开发技术",
"price": 16900
}
]
html结构如下：
<body>
<div id="list">
<ul class="list-group">
<li>书名：?,一本要10元</li>
<li>书名：?,一本要10元</li>
<li>书名：?,一本要10元</li>
<li>书名：?,一本要10元</li>
</ul>
</div>
<div>
<button disabled="false" id="prev">上一页</button>
<button id="next">下一页</button>
</div>
<p id="pagination">共?页，当前?页</p>
</body>
我们可以定义当前页数为pageNum，总页数为maxPage，每页显示的数据为limit条。
let pageNum = 1; // 当前页数，默认为1
const limit = 5; // 每页显示多少条数据
const maxPage = Math.ceil(bookList.length / limit); // 最大页数
当前显示数据索引受pageNum和limit影响。
如果是第一页，即pageNum为1时，则显示数据所对应的索引为04；第二页，pageNum为2时，为59；第三页，pageNum为3时，为10~14。
用变量来表示为：(pageNum-1)limit ~ pageNumlimit
所以，我们书写一个更新页面的函数，并在一开始的时候就调用该函数进行初始化页面。
// 更新页面数据（n当前页数）
function updataData(n) {
const listGroup = document.querySelector(".list-group")
const pagination = document.getElementById("pagination")
// 清空所有数据
listGroup.innerHTML = ''
// 循环遍历每一条数据
for (let i = (n - 1) * limit; i < n * limit; i++) {
const obj = bookList[i]
// 如果有值才添加到元素中。
// 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。
obj && (listGroup.innerHTML += `<li>书名：《${obj.name}》，价格为${obj.price}元</li>`)
}
// 更新当前页数和总页数
pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}
在点击下一页按钮时，需要更新当前页数（pageNum++）和当前页面显示的数据（调用updataData函数），最终还要更新按钮的状态，如果已经到了最后一页，则要将下一页按钮的状态设置为无法选中。
const prev = document.getElementById("prev");
// 点击下一页
next.onclick = function () {
// 如果当前页是最后一页了，则不做任何操作
if (pageNum === maxPage) return
pageNum++
updataData(pageNum)
next.disabled = pageNum >= maxPage ? true : false
};
不过这样做有个问题，”上一页”按钮一开始就被设置为disabled，点击下一页，也就是跳转到第2页的时候，此时还是不能点击上一页按钮。
因此，在点击下一页时，还要根据当前页数，改变上一页按钮的状态，我们可以定义一个函数来实现更新按钮状态。
// 更新按钮状态
function updateBtnStatu(pageNum) {
prev.disabled = pageNum <= 1 ? true : false
next.disabled = pageNum >= maxPage ? true : false
}
const next = document.getElementById("next");
// 点击下一页
next.onclick = function () {
// 如果当前页是最后一页了，则不做任何操作
if (pageNum === maxPage) return
pageNum++
updataData(pageNum)
updateBtnStatu(pageNum)
};
点击上一页同理。
// 更新按钮状态
const prev = document.getElementById("prev");
// 点击上一页
prev.onclick = function () {
// 如果当前页是第一页，则不做任何操作
if (pageNum === 1) return
pageNum--
updataData(pageNum)
updateBtnStatu(pageNum)
};
源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
li {
list-style: none;
margin-bottom: 20px;
}
#list {
width: 450px;
height: 300px;
margin: 30px auto;
text-align: center;
padding: 20px;
border: 3px solid skyblue;
}
</style>
</head>
<body>
<div id="list">
<ul class="list-group">
<li>书名：?,一本要10元</li>
<li>书名：?,一本要10元</li>
<li>书名：?,一本要10元</li>
<li>书名：?,一本要10元</li>
</ul>
</div>
<div>
<button disabled="false" id="prev">上一页</button>
<button id="next">下一页</button>
</div>
<p id="pagination">共?页，当前?页</p>
</body>
<script>
// 课外书列表
const bookList = [{
"name": "带你从入门到实战全面掌握 uni-app",
"price": 8900
},
{
"name": "初中级前端工程师面试宝典",
"price": 4900
},
{
"name": "微信公众号开发入门",
"price": 3900
},
{
"name": "从零入门 React 通关指北",
"price": 8900
},
{
"name": "Flask 框架基础",
"price": 9800
},
{
"name": "JavaScript 从零构建音乐播放器",
"price": 8900
},
{
"name": "微信小程序开发入门",
"price": 1490
},
{
"name": "SpringBoot+Thymeleaf 开发 BBS 论坛",
"price": 13900
},
{
"name": "Vue.js 3 + Node.js 实现线上聊天室",
"price": 8800
},
{
"name": "Express.js 实现前后端分离的博客系统",
"price": 8900
},
{
"name": "经典项目：前后端分离网盘系统实战",
"price": 8900
},
{
"name": "21 个实验带你快速开发 Django 博客系统",
"price": 1000
},
{
"name": "React Hook 打造精美在线记账本",
"price": 8900
},
{
"name": '红楼梦',
"price": 5900
},
{
"name": "Three.js 在网页中创建 3D 动画",
"price": 6400
},
{
"name": "Web 前端高级开发技术",
"price": 16900
}
]
let pageNum = 1; // 当前页数，默认为1
const limit = 5; // 每页显示多少条数据
const maxPage = Math.ceil(bookList.length / limit); // 最大页数
const prev = document.getElementById("prev");
const next = document.getElementById("next");
// 初始化数据
updataData(pageNum)
// 更新页面数据（n当前页数）
function updataData(n) {
const listGroup = document.querySelector(".list-group")
const pagination = document.getElementById("pagination")
// 清空所有数据
listGroup.innerHTML = ''
// 循环遍历每一条数据
for (let i = (n - 1) * limit; i < n * limit; i++) {
const obj = bookList[i]
// 如果有值才添加到元素中。
// 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。
obj && (listGroup.innerHTML += `<li>书名：《${obj.name}》，价格为${obj.price}元</li>`)
}
// 更新当前页数和总页数
pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}
// 更新按钮状态
function updateBtnStatu(pageNum) {
prev.disabled = pageNum <= 1 ? true : false
next.disabled = pageNum >= maxPage ? true : false
}
// 点击上一页
prev.onclick = function () {
// 如果当前页是第一页，则不做任何操作
if (pageNum === 1) return
pageNum--
updataData(pageNum)
updateBtnStatu(pageNum)
};
// 点击下一页
next.onclick = function () {
// 如果当前页是最后一页了，则不做任何操作
if (pageNum === maxPage) return
pageNum++
updataData(pageNum)
updateBtnStatu(pageNum)
};
</script>
</html>
最终实现的效果如下：
