分页功能如下：

1. 数据分页显示，每页显示若干条数据，默认当前页码为第一页。例如：每页5条数据，则第一页显示 1-5 条，第二页显示 6-10 条，依此类推。
2. 当页码为第一页时，上一页为禁用状态，点击无任何变化。
3. 当页码为最后一页时，下一页为禁用状态，点击无任何变化。
4. 正确显示当前页数和总页数。

首先，要显示的数据如下：

// 课外书列表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结构如下：

书名：?,一本要10元
书名：?,一本要10元
书名：?,一本要10元
书名：?,一本要10元
上一页下一页
共?页，当前?页

我们可以定义当前页数为pageNum，总页数为maxPage，每页显示的数据为limit条。

let pageNum = 1; // 当前页数，默认为1
const limit = 5; // 每页显示多少条数据
const maxPage = Math.ceil(bookList.length / limit); // 最大页数

当前显示数据索引受pageNum和limit影响。

如果是第一页，即pageNum为1时，则显示数据所对应的索引为0_{4；第二页，pageNum为2时，为5}9；第三页，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 += `
书名：《${obj.name}》，价格为${obj.price}元
`)}// 更新当前页数和总页数pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}

在点击下一页按钮时，需要更新当前页数（pageNum++）和当前页面显示的数据（调用updataData函数），最终还要更新按钮的状态，如果已经到了最后一页，则要将下一页按钮的状态设置为无法选中。

const prev = document.getElementById("prev");
// 点击下一页
next.onclick = function () {// 如果当前页是最后一页了，则不做任何操作if (pageNum === maxPage) returnpageNum++updataData(pageNum)next.disabled = pageNum >= maxPage ? true : false
};

不过这样做有个问题，”上一页”按钮一开始就被设置为disabled，点击下一页，也就是跳转到第2页的时候，此时还是不能点击上一页按钮。

因此，在点击下一页时，还要根据当前页数，改变上一页按钮的状态，我们可以定义一个函数来实现更新按钮状态。

// 更新按钮状态
function updateBtnStatu(pageNum) {prev.disabled = pageNum <= 1 ? true : falsenext.disabled = pageNum >= maxPage ? true : false
}
const next = document.getElementById("next");
// 点击下一页
next.onclick = function () {// 如果当前页是最后一页了，则不做任何操作if (pageNum === maxPage) returnpageNum++updataData(pageNum)updateBtnStatu(pageNum)};

点击上一页同理。

// 更新按钮状态
const prev = document.getElementById("prev");
// 点击上一页
prev.onclick = function () {// 如果当前页是第一页，则不做任何操作if (pageNum === 1) returnpageNum--updataData(pageNum)updateBtnStatu(pageNum)
};

源代码如下：

书名：?,一本要10元
书名：?,一本要10元
书名：?,一本要10元
书名：?,一本要10元
上一页下一页
共?页，当前?页

最终实现的效果如下：