JS 分页功能实现

使用方法

renderPage函数传入 currentPage,totalPage,showPageNum，这个函数会计算开始渲染的页码和结束渲染的页码。计算完成后会调用performRender函数，performRender接收开始渲染的页码和结束渲染的页码以及当前页，在这个函数中我们需要编写操控Dom元素的逻辑。

源代码

/* currentPage: 当前页码 totalPage: 总页数 showPageNum: 需要展示的页数 */ function renderPage(currentPage,totalPage,showPageNum) { /* startPage: 开始渲染的页码 endPage: 结束渲染的页码 minus: 当前页减去的值 plus: 当前页加上的值 */ let startPage, endPage, minus, plus // 如果需要展示的页数为偶数，例如展示6页，需要完成前3后2的效果 if (showPageNum % 2 === 0) { minus = showPageNum / 2 plus = minus - 1 } else { // 如果需要展示的页数为奇数，例如展示5页，需要完成前2后2的效果 minus = Math.floor(showPageNum / 2) plus = minus } // 当前总页数不够展示的 if (totalPage < showPageNum) { startPage = 1 endPage = totalPage } else if (currentPage - minus < 1) { // 当前页减去minus后小于1，说明开始渲染的页码小于1了，那么就需要从第一页开始渲染 startPage = 1; endPage = showPageNum } else if (currentPage + plus > totalPage) { // 当前页加上plus后大于总页数，说明结束渲染的页码大于总页数了 // 那么就需要从最后一页开始往前渲染 startPage = totalPage - (showPageNum - 1); endPage = totalPage; } else { startPage = currentPage - minus; endPage = currentPage + plus; } performRender(startPage, endPage, currentPage) } /* 这里拿到开始渲染的页码和结束渲染的页码以及当前页，就可以自定义渲染html页面的逻辑了。 */ function performRender(startPage,endPage,currentPage) { let str = '' for (let i = startPage; i <= endPage; i++) { if (i === currentPage) { str += i + "* " } else { str += i + " " } } console.log(str) } /* 这里拿到开始渲染的页码和结束渲染的页码以及当前页，就可以自定义渲染html页面的逻辑了。 */ function performRender(startPage,endPage,currentPage) { let str = '' for (let i = startPage; i <= endPage; i++) { if (i === currentPage) { str += i + "* " } else { str += i + " " } } console.log(str) }

测试及结果

renderPage(0,10,6) renderPage(1,10,6) // 第1页，总共10页，一次展示6页 renderPage(2,10,6) renderPage(3,10,6) renderPage(4,10,6) renderPage(5,10,6) renderPage(6,10,6) renderPage(7,10,6) renderPage(8,10,6) renderPage(9,10,6) renderPage(10,10,6) renderPage(11,10,6) console.log("-------------") renderPage(0,10,5) renderPage(1,10,5) // 第1页，总共10页，一次展示5页 renderPage(2,10,5) renderPage(3,10,5) renderPage(4,10,5) renderPage(5,10,5) renderPage(6,10,5) renderPage(7,10,5) renderPage(8,10,5) renderPage(9,10,5) renderPage(10,10,5) renderPage(11,10,5)

结果