侧边栏壁纸
博主头像
Dioxide-CN博主等级

茶边话旧,看几许星迢露冕,从淮海南来。

  • 累计撰写 54 篇文章
  • 累计创建 30 个标签
  • 累计收到 24 条评论

目 录CONTENT

文章目录

带有省略号的分页器

Dioxide-CN
2023-01-09 / 0 评论 / 7 点赞 / 74 阅读 / 806 字
温馨提示:
本文最后更新于 2023-01-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

带有省略号的分页器

目标与需求分析

假设总页数为 totalPage ,当前点击选中的页数为 clickPage 该值从 1 开始计算,总页数从大于 7 开始构造省略号的按钮。依据分类讨论可以得到以下四种情况:

  • 1 totalPage 小于等于7时:
1234567
  • 2 totalPage 大于7时:

    • 2.1 clickPage 大于等于 0 且 小于等于 3 :
    12345...totalPage
    • 2.2 clickPage 大于 3 且 小于 totalPage - 2
    1...456...totalPage
    • 2.3 clickPage 大于等于 totalPage - 2 且 小于等于 totalPage
    1...totalPage-4totalPage-3totalPage-2totalPage-1totalPage

我们通过几个具体情况来进一步分析什么时候产生省略号,假设 totalPage 为 9:

  1. clickPage = 1 符合情况 2.1
    12345...9
  2. clickPage = 2 符合情况 2.1
    12345...9
  3. clickPage = 3 符合情况 2.1
    12345...9
  4. clickPage = 4 符合情况 2.2
    12345...9
  5. clickPage = 5 符合情况 2.2
    1...456...9
  6. clickPage = 6 符合情况 2.2
    1...56789
  7. clickPage = 7 符合情况 2.3
    1...56789
  8. clickPage = 8 符合情况 2.3
    1...56789
  9. clickPage = 9 符合情况 2.3
    1...56789

代码实现

// 点击页
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); // 每次重新选择分页就需要刷新分页器
})
7

评论区