带有省略号的分页器
目标与需求分析
假设总页数为 totalPage ，当前点击选中的页数为 clickPage 该值从 1 开始计算，总页数从大于 7 开始构造省略号的按钮。依据分类讨论可以得到以下四种情况：
我们通过几个具体情况来进一步分析什么时候产生省略号，假设 totalPage 为 9：
代码实现
代码语言：javascript复制// 点击页
clickPage = parseInt(clickPage)
// 计算总页数 res.length 为请求后端接口得到的数据数量
totalPage = Math.ceil(res.length / pageSize);
// 清空列表 $pageList 为存储分页按钮的 div 容器 使用 JQuery 获取
$pageList.html("");
// 重新渲染上下页按钮 $pagePrev $pageNext 为上一页和下一页按钮
if (clickPage === 1 && totalPage > 1) {
$pagePrev.hide();
$pageNext.show();
} else if (clickPage === totalPage && totalPage > 1) {
$pagePrev.show();
$pageNext.hide();
} else if (totalPage <= 1) {
$pagePrev.hide();
$pageNext.hide();
} else {
$pagePrev.show();
$pageNext.show();
}
if (totalPage <= 7) {
// totalPage 小于等于 7 时直接构造
for (let i = 1; i <= totalPage; i ) {
$pageList.append('<a class="page-number ' (i===clickPage?'active':'') '" data-type="' i '">' i '</a>');
}
} else {
// 在内存中创建含有 7 个分页按钮的数组
const pageArray = ['1',null,null,null,null,null,totalPage.toString()];
// 用来标记 clickPage 在数组中的索引位置
let index = 0;
// 判断第二位是否是省略号按钮
if (clickPage > 4) {
pageArray[1] = '...';
}
// 判断倒数第二位是否是省略号按钮
if (clickPage < totalPage - 3) {
pageArray[5] = '...';
}
// clickPage 靠近第一页 clickPage-1 的差值在[0,2]之间
if (clickPage >= 1 && clickPage <= 3) {
index = clickPage - 1;
pageArray[index] = clickPage.toString();
}
// clickPage 靠近最后一页 totalPage-clickPage 的差值在[0,2]之间
if (totalPage >= clickPage && totalPage - clickPage <= 2) {
index = 6 - totalPage clickPage;
pageArray[index] = clickPage.toString();
}
// 如果以上条件均不满足则 clickPage 一定在中间
if (index === 0 && clickPage !== 1 && clickPage !== totalPage) {
index = 3;
}
// 对数组中剩下的 null 元素进行页数的赋值
for (let i = 0; i < pageArray.length; i ) {
if (pageArray[i] === null) {
pageArray[i] = (parseInt(clickPage) i - index).toString();
}
// 将其作为一个 a 标签插入到容器中
$pageList.append('<a class="page-number ' (pageArray[i]===clickPage.toString()?'active':'') '" data-type="' pageArray[i] '">' pageArray[i] '</a>');
}
}
// 获取所有可点击的分页按钮 不包含 active 且 data-type 不等于 ...
$pageClickable = $(".page-number:not(.active)[data-type!='...']");
// 赋予这些按钮点击事件
$pageClickable.on("click", async function (e) {
e.stopPropagation();
// 具体操作
refreshPage(pageOnClicked); // 每次重新选择分页就需要刷新分页器
})
