如何优化PDF文件画廊分页，限制显示的页码数量？

原分页逻辑在文档数量较多时会显示全部页码（比如100个文档每页4个会显示1-20所有页码），现在修改为仅显示3个相邻页码，配合首尾省略号，效果如 < 1 ... 5 6 7 ... 20 >，随当前页动态变化。

无需修改HTML，直接使用你提供的原有结构 #

<ul class="tilesWrap" id="paginated-list" data-current-page="1" aria-live="polite">
    <li>
        <h2>1</h2>
        <h3>Ekim 1. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>2</h2>
        <h3>Ekim 2. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>3</h2>
        <h3>Ekim 3. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>4</h2>
        <h3>Ekim 4. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>1</h2>
        <h3>Eylül 1. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>2</h2>
        <h3>Eylül 2. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>3</h2>
        <h3>Eylül 3. Hafta</h3>
        <button>İndir</button>
    </li>
    <li>
        <h2>4</h2>
        <h3>Eylül 4. Hafta</h3>
        <button>İndir</button>
    </li>
</ul>

<nav class="pagination-container">
    <button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
        &lt;
    </button>

    <div class="pagination-numbers" id="pagination-numbers">

    </div>

    <button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
        &gt;
    </button>
</nav>

修改后的JavaScript代码 #

const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("li");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");

const paginationLimit = 4;  
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;
const visiblePages = 3; // 设置每次显示的页码数量

const disableButton = (button) => {
  button.classList.add("disabled");
  button.setAttribute("disabled", true);
};

const enableButton = (button) => {
  button.classList.remove("disabled");
  button.removeAttribute("disabled");
};

const handlePageButtonsStatus = () => {
  if (currentPage === 1) {
    disableButton(prevButton);
  } else {
    enableButton(prevButton);
  }

  if (pageCount === currentPage) {
    disableButton(nextButton);
  } else {
    enableButton(nextButton);
  }
};

const handleActivePageNumber = () => {
  document.querySelectorAll(".pagination-number").forEach((button) => {
    button.classList.remove("active");
    const pageIndex = Number(button.getAttribute("page-index"));
    if (pageIndex === currentPage) {
      button.classList.add("active");
    }
  });
};

const appendPageNumber = (index) => {
  const pageNumber = document.createElement("button");
  pageNumber.className = "pagination-number";
  pageNumber.innerHTML = index;
  pageNumber.setAttribute("page-index", index);
  pageNumber.setAttribute("aria-label", "Page " + index);

  paginationNumbers.appendChild(pageNumber);
};

const appendEllipsis = () => {
  const ellipsis = document.createElement("span");
  ellipsis.className = "pagination-ellipsis";
  ellipsis.innerHTML = "...";
  paginationNumbers.appendChild(ellipsis);
};

// 动态生成页码
const createPaginationNumbers = () => {
  paginationNumbers.innerHTML = ""; // 清空原有页码

  // 情况1：总页数小于等于要显示的页码数，直接显示全部
  if (pageCount <= visiblePages) {
    for (let i = 1; i <= pageCount; i++) {
      appendPageNumber(i);
    }
    return;
  }

  // 情况2：当前页处于前半部分，显示前visiblePages页 + 最后一页，中间加省略号
  if (currentPage <= Math.floor(visiblePages / 2) + 1) {
    for (let i = 1; i <= visiblePages; i++) {
      appendPageNumber(i);
    }
    appendEllipsis();
    appendPageNumber(pageCount);
  }
  // 情况3：当前页处于后半部分，显示第一页 + 省略号 + 最后visiblePages页
  else if (currentPage >= pageCount - Math.floor(visiblePages / 2)) {
    appendPageNumber(1);
    appendEllipsis();
    for (let i = pageCount - visiblePages + 1; i <= pageCount; i++) {
      appendPageNumber(i);
    }
  }
  // 情况4：当前页在中间，显示第一页 + 省略号 + 当前页前后各1页 + 省略号 + 最后一页
  else {
    appendPageNumber(1);
    appendEllipsis();
    for (let i = currentPage - 1; i <= currentPage + 1; i++) {
      appendPageNumber(i);
    }
    appendEllipsis();
    appendPageNumber(pageCount);
  }
};

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;

  handleActivePageNumber();
  handlePageButtonsStatus();
  createPaginationNumbers(); // 切换页面时重新生成页码
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

window.addEventListener("load", () => {
  createPaginationNumbers();
  setCurrentPage(1);

  prevButton.addEventListener("click", () => {
    setCurrentPage(currentPage - 1);
  });

  nextButton.addEventListener("click", () => {
    setCurrentPage(currentPage + 1);
  });

  // 使用事件委托处理动态生成的页码点击
  paginationNumbers.addEventListener("click", (e) => {
    if (e.target.classList.contains("pagination-number")) {
      const pageIndex = Number(e.target.getAttribute("page-index"));
      setCurrentPage(pageIndex);
    }
  });
});

关键修改说明 #

• 新增visiblePages变量控制每次显示的页码数量（这里设为3）
• 替换原getPaginationNumbers为createPaginationNumbers，根据当前页位置动态生成页码，覆盖4种场景：总页数较少、当前页在前半段、当前页在后半段、当前页在中间
• 添加appendEllipsis函数统一生成省略号元素
• 修改setCurrentPage方法，每次切换页面时重新渲染页码
• 使用事件委托处理动态生成的页码点击事件，避免重复绑定事件

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