Node.js与React项目中如何实现分页数字超指定数量后显示省略号

实现逻辑说明 #

核心通过三个维度控制页码展示范围：首尾固定展示的页码数量、当前页码前后相邻展示的页码数量，两个区间存在间隔时自动插入省略号，完全符合你要求的展示效果。

前端代码实现 #

// 先获取当前页码，默认值为1
const getCurrentPage = () => {
  const params = new URLSearchParams(window.location.search);
  return Number(params.get('page')) || 1;
};

const pager = () => {
  const paginate = [];
  const currentPage = getCurrentPage();
  const siblingCount = 2; // 当前页前后展示的相邻页数
  const boundaryCount = 2; // 首尾固定展示的页数

  // 生成需要展示的页码数组核心逻辑
  const generatePageNumbers = () => {
    const pages = [];

    // 1. 添加开头固定页码
    for (let i = 1; i <= Math.min(boundaryCount, totalPages); i++) {
      pages.push(i);
    }

    // 2. 计算当前页相邻页码的范围
    const leftSiblingStart = Math.max(boundaryCount + 1, currentPage - siblingCount);
    const rightSiblingEnd = Math.min(totalPages - boundaryCount, currentPage + siblingCount);

    // 3. 判断开头固定页和左侧相邻页之间是否需要插入省略号
    if (leftSiblingStart > boundaryCount + 1) {
      pages.push('...');
    } else if (boundaryCount + 1 <= totalPages - boundaryCount) {
      // 无间隔时直接补全中间页码
      for (let i = boundaryCount + 1; i < leftSiblingStart; i++) {
        pages.push(i);
      }
    }

    // 4. 添加当前页前后的相邻页码
    for (let i = leftSiblingStart; i <= rightSiblingEnd; i++) {
      pages.push(i);
    }

    // 5. 判断右侧相邻页和末尾固定页之间是否需要插入省略号
    if (rightSiblingEnd < totalPages - boundaryCount - 1) {
      pages.push('...');
    } else if (rightSiblingEnd < totalPages - boundaryCount) {
      // 无间隔时直接补全中间页码
      for (let i = rightSiblingEnd + 1; i <= totalPages - boundaryCount; i++) {
        pages.push(i);
      }
    }

    // 6. 添加末尾固定页码
    for (let i = Math.max(totalPages - boundaryCount + 1, boundaryCount + 1); i <= totalPages; i++) {
      pages.push(i);
    }

    // 去重处理边界场景的重复页码
    return [...new Set(pages)];
  };

  const pageNumbers = generatePageNumbers();

  // 渲染分页元素
  pageNumbers.forEach((page, index) => {
    if (page === '...') {
      paginate.push(<span key={`ellipsis-${index}`}>...</span>);
      return;
    }
    paginate.push(
      <Link href={`?page=${page}`} key={page}>
        <a className={page === currentPage ? 'active' : ''}>{page}</a>
      </Link>
    );
  });

  return paginate;
};

自定义调整方式 #

• 调整首尾固定展示的页码数：修改boundaryCount变量值即可，默认值2对应需求中的首尾展示2个页码
• 调整当前页前后相邻展示的页码数：修改siblingCount变量值即可，默认值2对应需求中当前页后展示2个相邻页码再显示省略号
• 可自行添加active类对应的CSS样式，高亮展示当前选中的页码

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