JavaScript分页限制可见页码数量问题求助

核心修改说明 #

重点调整loadPageNav函数，通过计算当前需显示的页码范围，搭配省略号按钮实现分页的截断显示，同时保留首页、上一页、下一页、末页的原有功能。

修改后的完整代码 #

const nav = document.getElementById('nav');
const content = document.getElementById('content');

let pageIndex = 0;
let itemsPerPage = 3;
let finalPage = Math.ceil(items.length / itemsPerPage) - 1;
const visiblePages = 10; // 每次显示的最大页码数量

loadItems();
function loadItems() {
  content.innerHTML = "";
  for (let i = pageIndex * itemsPerPage; i < (pageIndex * itemsPerPage) + itemsPerPage; i++) {
    if (!items[i]) break;
    const item = document.createElement('div');
    item.innerHTML = `
        <div>
            <img src="${items[i].src}"/>
        </div>
        <div>
            <button>${items[i].desc}</button>
        </div>
    `;
    content.append(item);
  }
  firstPage();
  minusPage();
  loadPageNav();
  plusPage();
  lastPage();
}

function loadPageNav() {
  const totalPages = finalPage + 1;
  let startPage = 1;
  let endPage = visiblePages;

  // 根据当前页计算显示的页码范围
  if (pageIndex + 1 > Math.ceil(visiblePages / 2)) {
    // 当前页靠近末尾时，显示最后10个页码
    if (pageIndex + 1 + Math.floor(visiblePages / 2) >= totalPages) {
      startPage = totalPages - visiblePages + 1;
      endPage = totalPages;
    } else {
      // 当前页在中间时，以当前页为中心显示前后页码
      startPage = (pageIndex + 1) - Math.floor(visiblePages / 2);
      endPage = (pageIndex + 1) + Math.floor(visiblePages / 2);
    }
  }

  // 总页数不足10时，直接显示全部页码
  if (totalPages <= visiblePages) {
    startPage = 1;
    endPage = totalPages;
  }

  // 添加左侧省略号（当起始页码大于1时）
  if (startPage > 1) {
    const ellipsisBtn = document.createElement('button');
    ellipsisBtn.classList.add('btn');
    ellipsisBtn.innerHTML = '...';
    ellipsisBtn.addEventListener('click', () => {
      pageIndex = startPage - 2; // 跳转到前一组的最后一页
      loadItems();
    });
    nav.append(ellipsisBtn);
  }

  // 生成页码按钮
  for (let i = startPage; i <= endPage; i++) {
    const button = document.createElement('button');
    button.classList.add('btn');
    // 给当前激活的页码添加样式标记
    if (i === pageIndex + 1) {
      button.classList.add('active');
    }
    button.innerHTML = i;
    button.addEventListener('click', (e) => {
      pageIndex = parseInt(e.target.innerHTML) - 1;
      loadItems();
    });
    nav.append(button);
  }

  // 添加右侧省略号（当结束页码小于总页数时）
  if (endPage < totalPages) {
    const ellipsisBtn = document.createElement('button');
    ellipsisBtn.classList.add('btn');
    ellipsisBtn.innerHTML = '...';
    ellipsisBtn.addEventListener('click', () => {
      pageIndex = endPage; // 跳转到后一组的第一页
      loadItems();
    });
    nav.append(ellipsisBtn);
  }
}

function plusPage() {
  const button = document.createElement('button');
  button.classList.add('btn');
  button.innerHTML = "&#8250;";
  button.addEventListener('click', () => {
    pageIndex = pageIndex + 1;
    loadItems();
  });

  nav.append(button);

  if (pageIndex === finalPage) {
    button.disabled = true;
  }
}

function minusPage() {
  const button = document.createElement('button');
  button.classList.add('btn');
  button.innerHTML = "&#8249;";
  button.addEventListener('click', () => {
    pageIndex = pageIndex - 1;
    loadItems();
  });
  nav.append(button);

  if (pageIndex === 0) {
    button.disabled = true;
  }
}

function firstPage() {
  nav.innerHTML = "";
  const button = document.createElement('button');
  button.classList.add('btn');
  button.innerHTML = "&laquo";
  button.addEventListener('click', () => {
    pageIndex = 0;
    loadItems();
  });

  nav.append(button);

  if (pageIndex === 0) {
    button.disabled = true;
  }
}

function lastPage() {
  const button = document.createElement('button');
  button.classList.add('btn');
  button.innerHTML = "&raquo";
  button.addEventListener('click', () => {
    pageIndex = finalPage;
    loadItems();
  });

  nav.append(button);

  if (pageIndex === finalPage) {
    button.disabled = true;
  }
}

额外样式建议（可选） #

添加CSS样式区分当前激活的页码，提升用户体验：

.btn.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

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