The paging function is as follows:
- The data is displayed in pages, each page displays several pieces of data, and the default current page number is the first page. For example: 5 pieces of data per page, 1-5 pieces will be displayed on the first page, 6-10 pieces will be displayed on the second page, and so on.
- When the page number is the first page, the previous page is disabled, and there is no change when clicking.
- When the page number is the last page, the next page is disabled, and there is no change when clicking.
- Correctly display current page count and total page count.
First, the data to be displayed is as follows:
// 课外书列表
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
}
]
The html structure is as follows:
<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>
We can define the current page number as pageNum, the total number of pages as maxPage, and the data displayed on each page as limit bars.
let pageNum = 1; // 当前页数，默认为1
const limit = 5; // 每页显示多少条数据
const maxPage = Math.ceil(bookList.length / limit); // 最大页数
The currently displayed data index is affected by pageNum and limit.
If it is the first page, that is, when pageNum is 1, the index corresponding to the displayed data is 0 4; for the second page, when pageNum is 2, it is 5 9; for the third page, when pageNum is 3, it is 10~14.
Expressed as a variable: (pageNum-1) limit ~ pageNum limit
Therefore, we write a function to update the page, and call this function to initialize the page at the beginning.
// 更新页面数据（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}页`
}
When clicking the next page button, you need to update the current page number (pageNum++) and the data displayed on the current page (call the updataData function), and finally update the state of the button. If you have reached the last page, you need to update the next page button is set to uncheckable.
const prev = document.getElementById("prev");
// 点击下一页
next.onclick = function () {
// 如果当前页是最后一页了，则不做任何操作
if (pageNum === maxPage) return
pageNum++
updataData(pageNum)
next.disabled = pageNum >= maxPage ? true : false
};
However, there is a problem with this. The "Previous Page" button is set to disabled from the beginning. When you click the next page, that is, jump to the second page, you still cannot click the Previous Page button at this time.
Therefore, when the next page is clicked, the state of the previous page button should be changed according to the current page number. We can define a function to update the button state.
// 更新按钮状态
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)
};
Click on the previous page for the same reason.
// 更新按钮状态
const prev = document.getElementById("prev");
// 点击上一页
prev.onclick = function () {
// 如果当前页是第一页，则不做任何操作
if (pageNum === 1) return
pageNum--
updataData(pageNum)
updateBtnStatu(pageNum)
};
The source code is as follows:
<!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>
The final effect is as follows:
