「自学哈网」前端如何实现分页？
也想出现在这里？
联系我们吧
先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）
分页的思路：把所有的数据请求回来后，通过arr.slice(开始索引，结束索引)来进行截取每一页的数据；假设当前页是currentPage = 1，pageSize = 5，那么应该从(currentPage-1)*pageSize开始截取，到currentPage*pageSize结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；
<!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">
<title>Document</title>
<style>
ul {
list-style: none;
margin-top: 100px;
}
.list {
width: 200px;
background-color: aqua;
margin-top: 10px;
text-align: center;
margin: 10px auto 0px;
}
.pageBtn {
text-align: center;
}
</style>
</head>
<body>
<ul id="tabel">
</ul>
<div class="pageBtn">
<span>请点击页码：</span>
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</body>
<script>
// 假设这就是后台返回的数据
const tabelList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
// 当前页码
const currentPage = 1
// 页面尺寸
const pageSize = 5
// 截取到相应的页码数据
let pageList = []
const ul = document.getElementById('tabel')
function List(pageData) {
ul.innerHTML = ""
// ul绑定数据
for (let i = 0; i < pageData.length; i++) {
const li = document.createElement("li")
li.classList.add("list")
li.innerText = pageData[i]
ul.appendChild(li)
}
}
// 刚开始显示的是页，所以先截取页的数据
pageList = tabelList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
List(pageList)
// 给按钮注册点击事件
const btn = document.getElementsByClassName("pageBtn")
const li = document.querySelector("li")
btn[0].onclick = function (e) {
let newpageList = []
newCurrentPage = Number(e.target.innerText)
newpageList = tabelList.slice((newCurrentPage - 1) * pageSize, newCurrentPage * pageSize)
List(newpageList)
}
</script>
</html>
本站声明：
本站所有资源来源于网络，分享目的仅供大家学习和交流！如若本站内容侵犯了原著者的合法权益，可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台，好资源不私藏，大家一起分享！
自学哈网 » 「自学哈网」前端如何实现分页？
本站所有资源来源于网络，分享目的仅供大家学习和交流！如若本站内容侵犯了原著者的合法权益，可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台，好资源不私藏，大家一起分享！
自学哈网 » 「自学哈网」前端如何实现分页？
也想出现在这里？
联系我们吧
