上一节的分页器只能实现简单的效果，是无法点击到中间页码的
这一节，我们需要稍微改造一下
考虑问题： 1. 当点击到5， 6， 7的时候页码应该是活动的，并且页码向后移动 2. 这时应该出现两边都有省略号
So 1. 我们完全可以将上一节左右两边都有省略号的情况抠出来，作为函数around 2. 在首页情况下的时候，做一次判断，判断当前页码 离首页 间隔有一定数量的时候，使其变为两边都有省略号的效果 3. 在尾页情况下的时候，也同上
抠出两边都有省略号的情况 /**
-
两边都有省略号
-
@param {*} total 总页数
-
@param {*} pagesLen 页码个数
-
@param {*} cur 当前页码 */ function around(total, pagesLen, cur) { let pagesNum = []; let side = (pagesLen - 5) / 2; // 左边的数组 let leftArr = [], // 右边的数组 rightArr = [];
// 左右两边都匀称 for (var i = 1; i <= side; i++) { leftArr.unshift(cur - i); rightArr.push(cur + i); } // 考虑一下 如何不能整除，我们可以视情况而定，添加一个在左边，或者右边 pagesNum = (pagesLen - 5) % 2 === 0 ? [1, '...'].concat(leftArr, cur, rightArr, '...', total) : [1, '...'].concat(cur - Math.ceil(side), leftArr, cur, rightArr, '...', total); return pagesNum; } 第二步： 给 首页及尾页显示的情况再加一层判断
/** *
-
@param {*} total 总页数
-
@param {*} pagesLen 页码个数
-
@param {*} cur 当前页码 */ function drawPage(total, pagesLen, cur) { // 可显示页码数 = 页码个数 - (首页|尾页 + 一个省略号) var temp = pagesLen - 2;
// 显示页码数组 let pagesNum = [];
// 如果total总数小于页码个数，我们就采用total总数 if (total <= pagesLen) { for (var i = 0; i < total; i++) { pagesNum.push(i + 1); } } else { // 如果total大于页码总数,则需要分为三种情况
// 1、 第一种，当前页码是否小于 temp (temp为 页码数 - 2) if (cur <= temp) { // 当前页码离首页稍近的时候，尾部显示省略号 if (cur <= temp - Math.ceil(temp / 2)) { for (var i = 0; i < temp; i++) { pagesNum.push(i + 1); } pagesNum.push('...', total); } else { // 当前页码离首页较远的时候，出现两边省略号 pagesNum = around(total, pagesLen, cur); } // 2. 第二种，当前页码是否大于 总数 - temp, } else if (cur >= total - temp) { // 当前页码离尾页稍近的时候，首部显示省略号 if (cur >= total - Math.floor(temp / 2)) { for (var i = 0; i < temp; i++) { pagesNum.unshift(total - i); } pagesNum.unshift(1, '...') } else { // 当前页码离尾页页较远的时候，出现两边省略号 pagesNum = around(total, pagesLen, cur); } } else { // 如果以上情况不成立，则显示两个省略号 pagesNum = around(total, pagesLen, cur); }} return pagesNum; } 效果：
console.log(drawPage(100, 9 ,1)); // [ 1, 2, 3, 4, 5, 6, 7, '...', 100 ] console.log(drawPage(100, 9 ,7)); // [ 1, '...', 5, 6, 7, 8, 9, '...', 100 ]
console.log(drawPage(100, 9 ,97)); // [ 1, '...', 94, 95, 96, 97, 98, 99, 100 ] console.log(drawPage(100, 9 ,94)); // [ 1, '...', 92, 93, 94, 95, 96, '...', 100 ]
console.log(drawPage(100, 9 ,50)); // [ 1, '...', 48, 49, 50, 51, 52, '...', 100 ] 页面上测试 JS：
var pages = document.getElementById('pages'); // 页码的个数：比如9 var pagesSum = pages.children.length; // 模拟数据： 页码总数： 比如100 var pageTotal = 100;
// 点击事件 pages.onclick = function (e) { var tar = e.target; if (tar.nodeName === 'LI') { let numTxt = tar.innerText; // 如果是... 就直接返回 if (numTxt === '...') return;
// 改变页码
changePage(pageTotal, pagesSum, numTxt * 1);
// 给对应的页码加上高亮
for (var i = 0; i < pages.children.length; i++) {
pages.children[i].className = pages.children[i].innerText === numTxt ? 'current' : '';
}
}
}
// 默认改变一次 changePage(pageTotal, pagesSum, 1);
// 改变页码 function changePage(total, pagesLen, cur) { // 生成页码 let nums = drawPage(total, pagesLen, cur); for (var i = 0; i < pages.children.length; i++) { // 将页码绘制对应位置上 pages.children[i].innerText = nums[i]; } } <div class="page-container"> <span id="prev-page">上一页</span> <ul id="pages"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <span id="next-page">下一页</span> </div> CSS
<style> * { margin: 0; padding: 0; list-style: none; }
.page-container {
width: 480px;
height: 30px;
line-height: 30px;
margin: 100px auto;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
.page-container>span {
padding: 0 10px;
}
.page-container>ul {
flex: 1;
display: flex;
}
.page-container>ul>li {
flex: 1;
text-align: center;
border-right: 1px solid #ccc;
cursor: pointer;
}
.page-container>ul>li.current {
color: orange;
}
.page-container>ul>li:first-child {
border-left: 1px solid #ccc;
}
</style>
转载自【知乎--贝程学院】
