首先形形色色的分页器大家肯定都看过，这一次就快速实现一个简单的分页器，应该不会耽搁太久吧~
先来看一下简洁布局：
image.png
瞜一眼这布局：
- 页码数量总共只有9个
- 当足够显示所有页码的情况就全部显示了
那么问题来了，如果不够呢？
-
第一种情况
image.png
-
第二种情况
image.png
-
第三种情况
image.png
正点：
- 总共只能显示九个页码
- 当不够的是则显示省略号
- 最主要的是省略号的位置，而省略号的位置由取决于当前页码处于哪里
3.1 当前页码接近首页时， 则小于等于 7， 省略号靠近尾页
3.2 当前页码接近尾页时，则大于等于尾页 - 7，省略号靠近首页
3.3 当以上不成立的时候，首尾两边都有省略号- 必须凑足九个页码
function pageView(total, cur) {
var pageNum = [];
// 小于九个页码，开开心心
if (total <= 9) {
for (var i = 0; i < total; i++) {
pageNum.push(i + 1);
}
} else {
// 超出九个页码另当别论
if (cur <= 7) {
// 前面显示的页码
for (var i = 0; i < 7; i++) {
pageNum.push(i + 1);
}
// 补齐页码
pageNum.push('...', total);
} else if (cur >= total - 7) {
// 后面显示的页码
for (var i = 0; i < 7; i++) {
pageNum.unshift(total - i);
}
// 补齐页码
pageNum.unshift(1, '...');
} else {
// 凑足九个页码
pageNum = [1, '...', cur - 2, cur - 1, cur, cur + 1, cur + 2, '...', total];
}
}
return pageNum;
}
打印效果
// 刚刚好，万事大吉
var total = 9;
var cur = 1;
console.log(pageView(total, cur)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 当前页码靠近首页
total = 100;
cur = 1;
console.log(pageView(total, cur)); // [1, 2, 3, 4, 5, 6, 7, "...", 100]
// 当前页码靠近尾页
total = 100;
cur = 99;
console.log(pageView(total, cur)); // [1, "...", 94, 95, 96, 97, 98, 99, 100]
// 当前页码靠中间
total = 100;
cur = 50;
console.log(pageView(total, cur)); // [1, "...", 48, 49, 50, 51, 52, "...", 100]
image.png
事情并没有那么简单~
上面的7应该是活的，（cur - 2, cur - 1, cur, cur + 1, cur + 2）也应该是活的，因为页码不可能就用于是九个，哪天我就想要一个能显示15个页码的呢？很简单，改造一下
- 当前页j接近于左右某一端 : 用可显示页码的个数 - 2
原因： 首页，尾页总得占一个，再加上一个省略号
- 情况居于中间: (用可显示页码的个数 - 5）/ 2；
原因：首页，尾页， 两个省略号，一个当前页，然后除于2，是因为当前页左右两边平均分
function pageView(total, cur, pagesLen) {
var pageNum = [];
// 小于九个页码，开开心心
if (total <= pagesLen) {
for (var i = 0; i < total; i++) {
pageNum.push(i + 1);
}
} else {
// 超出九个页码另当别论
var max = pagesLen - 2; // 首|尾 + ...
if (cur <= max) {
// 前面显示的页码
for (var i = 0; i < max; i++) {
pageNum.push(i + 1);
}
// 补齐页码
pageNum.push('...', total);
} else if (cur >= total - max) {
// 后面显示的页码
for (var i = 0; i < max; i++) {
pageNum.unshift(total - i);
}
// 补齐页码
pageNum.unshift(1, '...');
} else {
// 凑足pagesLen个页码
var around = (pagesLen - 5) / 2;
// 当前页左右两边的页码
var leftArr = [];
var rightArr = [];
for (var i = 1; i <= around; i++) {
leftArr.unshift(cur - i);
rightArr.push(cur + i);
}
// 凑页码
pageNum = leftArr.concat(cur, rightArr);
pageNum.push('...', total);
pageNum.unshift(1, '...');
}
}
return pageNum;
}
效果
// 页码多于total
var total = 9;
var cur = 1;
var pagesLen = 15;
console.log(pageView(total, cur, pagesLen)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 当前页码靠近首页
total = 100;
cur = 1;
pagesLen = 15;
console.log(pageView(total, cur, pagesLen)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, "...", 100]
// 当前页码靠近尾页
total = 100;
cur = 99;
pagesLen = 15;
console.log(pageView(total, cur, pagesLen)); // [1, "...", 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
// 当前页码靠中间
total = 100;
cur = 50;
pagesLen = 15;
console.log(pageView(total, cur, pagesLen)); // [1, "...", 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, "...", 100]
网友评论