上一节的分页器只能实现简单的效果,是无法点击到中间页码的
这一节,我们需要稍微改造一下
考虑问题:
- 当点击到5, 6, 7的时候页码应该是活动的,并且页码向后移动
- 这时应该出现两边都有省略号
So
-
我们完全可以将上一节左右两边都有省略号的情况抠出来,作为函数around
-
在首页情况下的时候,做一次判断,判断当前页码 离首页 间隔有一定数量的时候,使其变为两边都有省略号的效果
-
在尾页情况下的时候,也同上
-
抠出两边都有省略号的情况
/**
* 两边都有省略号
* @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>