隐藏div分页点击页码失效 需实现最多7项省略号分页结构

现存问题根因 #

• 总页数计算未做取整处理：直接用元素总数除以每页2个的规则计算总页数，元素总数为奇数时会得到小数页码，导致分页逻辑异常
• 页码数组多余截断：点击页码渲染时错误使用slice切掉了数组最后一项，导致尾页页码丢失
• 内容显示逻辑无边界判断：固定取两个子元素显示，最后一页元素不足2个时会出现空白
• 分页导航参数不符合需求：原pagination()函数默认相邻页码数为2，渲染出的导航项总数会超过7个的上限

修正后代码 #

1. 调整pagination工具函数参数 #

把默认相邻页码数改为1，保证导航最多展示7个项：

const pagination = (pageNumber, totalPages = 40, siblingCount = 1) => {
  let pagination_str = "";

  if (1 < pageNumber - siblingCount) {
    pagination_str += "1 ";
    if (siblingCount + 3 < pageNumber) {
      pagination_str += "… ";
    } else if (siblingCount + 2 < pageNumber) {
      pagination_str += "2 ";
    }
  }
  for (
    let ii = (0 < (pageNumber - siblingCount) ? pageNumber - siblingCount : 1); ii < (pageNumber); ii++
  ) {
    pagination_str += ii + " ";
  }
  for (
    let ii = pageNumber; ii <= ((totalPages >= pageNumber + siblingCount) ? (pageNumber + siblingCount) : totalPages); ii++
  ) {
    pagination_str += ii + " ";
  }
  if (totalPages > pageNumber + siblingCount) {
    if (totalPages - siblingCount - 2 > pageNumber) {
      pagination_str += "… ";
    } else if (totalPages - siblingCount - 1 > pageNumber) {
      pagination_str += (totalPages - 1) + " ";
    }
    pagination_str += totalPages;
  }
  return pagination_str;
}

2. 修正分页主逻辑 #

// 初始化隐藏所有项
$(".paginate .items > div").css("display", "none");
// 配置每页显示项数
const perPage = 2;
// 第一页默认显示前2项
$(".paginate .items > div:nth-child(1), .paginate .items > div:nth-child(2)").css("display", "block");
const item_count = $(".paginate .items > div").length;
// 总页数向上取整，避免奇数项漏算
const totalPage = Math.ceil(item_count / perPage);
let pag_item = pagination(1, totalPage).split(" ");
// 过滤split产生的空字符串
pag_item = pag_item.filter(item => item.trim() !== "");
// 渲染初始页码
for (const row of pag_item) {
  const activeClass = row == 1 ? "active" : "";
  $(".paginate .pager .pageNumbers").append(`<a href="javascript:void(0);" data-page="${row}" class="${activeClass}">${row}</a>`);
}
// 总页数小于等于1时隐藏分页导航
if (totalPage <= 1) {
  $(".paginate .pager .pageNumbers").hide();
}
// 页码点击事件
$(".paginate .pager .pageNumbers").on("click", "a", function() {
  const current_page = Number($(this).attr("data-page"));
  // 省略号项无点击逻辑
  if (isNaN(current_page)) return;
  if ($(this).hasClass("active")) return;
  // 清空旧页码重新渲染
  $(".paginate .pager .pageNumbers").empty();
  let newPagItems = pagination(current_page, totalPage).split(" ").filter(item => item.trim() !== "");
  for (const row of newPagItems) {
    const activeClass = row == current_page ? "active" : "";
    $(".paginate .pager .pageNumbers").append(`<a href="javascript:void(0);" data-page="${row}" class="${activeClass}">${row}</a>`);
  }
  // 切换内容显示
  $(".paginate .items > div").hide();
  const startIndex = (current_page - 1) * perPage;
  // 取当前页对应的项，做边界判断避免超出总元素数
  for (let i = 0; i < perPage; i++) {
    const targetIndex = startIndex + i;
    if (targetIndex >= item_count) break;
    $(".paginate .items > div").eq(targetIndex).show();
  }
});

3. HTML结构 #

原有HTML结构可直接复用，无需调整：

<div class="paginate">
  <div class="items">
    <div>one</div><div>page one</div><div>two</div><div>page two</div>
    <div>three</div><div>page three</div><div>four</div><div>page four</div>
    <div>five</div><div>page five</div><div>six</div><div>page six</div>
    <div>seven</div><div>page seven</div><div>nine</div><div>page eight</div>
    <div>nine</div><div>page nine</div><div>ten</div><div>page ten</div>
    <div>eleven</div><div>page eleven</div><div>twelve</div><div>page twelve</div>
    <div>thirteen</div><div>page thirteen</div><div>fourteen</div><div>page fourteen</div>
  </div>
  <div class="pager">
    <div class="pageNumbers"></div>
  </div>
</div>

效果说明 #

修正后分页导航固定最多展示7个项，格式为1 … 5 6 7 … 14（以提供的14页示例数据为例），当前选中页带active类可自定义高亮样式，点击页码可正常切换对应内容，最后一页不足2项时也能正常显示。

内容的提问来源于stack exchange，提问作者Enescan