带有省略号的分页器

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