JavaScript分页仅显示5个按钮的实现问题求助

问题描述 #

当前分页代码会渲染所有页码按钮（比如100页就显示100个），需要改成每次只显示5个按钮，规则如下：

• 正常情况显示当前页、当前页前2页、当前页后2页
• 处于第1页时，固定显示1-5页
• 处于最后一页时，固定显示最后5页
  之前添加的限制代码导致无法选择最后两页，需要修复这个问题，同时保证不会多显示多余页码。

原问题代码 #

function setUpPagination(items, wrapper, rows_per_page) {
  wrapper.innerHTML = "";

  let page_count = Math.ceil(items.length / rows_per_page);
  for (let i = 1; i < page_count + 1; i++) {
    let btn = paginationButton(i, items);
    wrapper.appendChild(btn);
  }
}

function paginationButton(page, items) {
  let button = document.createElement('button');
  button.innerText = page;
  if (current_page == page) {
    button.classList.add('active');
  }

  button.addEventListener('click', function() {
    current_page = page;
    displayList(items, list_element, rows, current_page);

    let current_btn = document.querySelector('.pagination button.active');
    current_btn.classList.remove('active');
    button.classList.add('active');
  })
  return button;
}

无效的限制代码（导致无法选择最后两页） #

if (i >= page_count) {
  i = page_count;
}

修复后的代码 #

核心是修改setUpPagination函数，先计算出需要显示的页码范围，再循环生成对应按钮：

function setUpPagination(items, wrapper, rows_per_page) {
  wrapper.innerHTML = "";

  let page_count = Math.ceil(items.length / rows_per_page);
  // 计算需要显示的起始页码
  let startPage = current_page <= 3 ? 1 : current_page - 2;
  // 计算需要显示的结束页码
  let endPage = current_page >= page_count - 2 ? page_count : current_page + 2;

  // 循环生成指定范围内的页码按钮
  for (let i = startPage; i <= endPage; i++) {
    let btn = paginationButton(i, items);
    wrapper.appendChild(btn);
  }
}

function paginationButton(page, items) {
  let button = document.createElement('button');
  button.innerText = page;
  if (current_page == page) {
    button.classList.add('active');
  }

  button.addEventListener('click', function() {
    current_page = page;
    displayList(items, list_element, rows, current_page);
    // 重新渲染分页按钮，保证切换页码后显示正确的范围
    setUpPagination(items, wrapper, rows_per_page);
  })
  return button;
}

逻辑说明 #

1. 起始页码计算：如果当前页是前3页（1、2、3），直接从第1页开始显示；否则从当前页往前推2页开始。
2. 结束页码计算：如果当前页是最后3页（比如总页数100，当前页是98、99、100），直接显示到最后一页；否则显示到当前页往后推2页。
3. 按钮点击后重新渲染：每次点击页码按钮后，重新调用setUpPagination函数，确保分页按钮的范围跟着当前页更新。
4. 移除无效限制代码：之前的限制代码会强制循环提前终止，导致最后几页的按钮无法生成，直接删掉即可。

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