原生JavaScript改造现有分页：实现前3页后、最后3页前的省略号分隔效果

保留原有逻辑的部分 #

• 总页数计算规则完全沿用原逻辑：基于接口返回的总数据量，通过Math.ceil(totalCount / pageSize)得到总页数totalPage
• 原有分页按钮的点击事件绑定、当前页码激活样式标记、AJAX数据加载的触发逻辑全部保留，无需修改
• 分页按钮缓存变量paginationButtons的缓存逻辑不变，仅调整生成的按钮覆盖范围

核心改造点：替换全量页码遍历生成逻辑 #

把原来“循环1到totalPage生成所有按钮”的代码，替换为“按首尾分段生成、间隔处插入省略号占位”的判断逻辑，具体规则：

• 固定在分页最前端保留3个连续页码：1、2、3
• 固定在分页最后端保留3个连续页码：totalPage-2、totalPage-1、totalPage
• 当首尾两段页码之间存在空隙时，仅在空隙位置插入非可点击的省略号占位，不渲染中间的所有页码按钮

可直接复用的分页列表生成代码 #

/**
 * 生成分页展示的元素列表
 * @param {number} totalPage 计算得到的总页数
 * @returns {Array} 分页元素列表，数字为可点击页码，字符串为省略号占位
 */
function getRenderPageList(totalPage) {
  const pageList = []
  const HEAD_KEEP_COUNT = 3 // 前端固定保留的页码数量
  const TAIL_KEEP_COUNT = 3 // 尾端固定保留的页码数量

  // 总页数较少，无需省略号，直接全量渲染
  if (totalPage <= HEAD_KEEP_COUNT + TAIL_KEEP_COUNT) {
    for (let i = 1; i <= totalPage; i++) {
      pageList.push(i)
    }
    return pageList
  }

  // 计算首尾保留段的边界
  const headRangeEnd = HEAD_KEEP_COUNT
  const tailRangeStart = totalPage - TAIL_KEEP_COUNT + 1

  // 判断首尾段之间是否存在空隙
  if (headRangeEnd < tailRangeStart - 1) {
    // 有间隙：生成分段页码+插入省略号占位
    for (let i = 1; i <= headRangeEnd; i++) pageList.push(i)
    pageList.push('...')
    for (let i = tailRangeStart; i <= totalPage; i++) pageList.push(i)
  } else {
    // 无间隙：直接生成连续全量页码
    for (let i = 1; i <= totalPage; i++) {
      pageList.push(i)
    }
  }
  return pageList
}

和原有逻辑的对接方式 #

• 调用上面的函数拿到渲染列表后，逐一遍历列表做渲染：
  • 如果列表项是数字：生成对应页码的按钮，绑定原有的点击触发AJAX加载的事件，判断数字是否等于当前pageNo，匹配则添加激活样式，同时把该按钮存入paginationButtons缓存
  • 如果列表项是'...'：生成纯文本的省略号元素，不绑定点击事件、不添加交互样式、不纳入按钮缓存
• 实际渲染效果和需求示例完全一致：比如总页数为12时，列表为[1,2,3, '...', 10,11,12]，最终展示为1 2 3 ... 10 11 12，不会生成4-9的多余按钮，同时所有保留的页码交互和原逻辑完全一致

额外说明：当总页数较少时（比如总页数小于6），逻辑会自动走全量渲染分支，不会生硬插入省略号，保证小数据量下的展示体验和原来保持一致。

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