先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）
分页的思路：把所有的数据请求回来后，通过
arr.slice(开始索引，结束索引)
来进行截取每一页的数据；假设当前页是
currentPage = 1
，
pageSize = 5
，那么应该从
(currentPage-1)*pageSize
开始截取，到
currentPage*pageSize
结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><ulid="tabel"></ul><divclass="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')functionList(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>
本文转载自: https://blog.csdn.net/m0_50441807/article/details/125154023
版权归原作者 小智玩前端 所有， 如有侵权，请联系我们删除。
版权归原作者 小智玩前端 所有， 如有侵权，请联系我们删除。