Merhabalar,

.pdf dosya galerim için bir sayfalandırma yapmaya çalışıyorum.

İnternette bulduğum ücretsiz bir sayfalandırma şablonu (html,css,java) kullanıyorum. İyi çalışıyor ama sorun şu ki; sonsuz sayfa numaraları oluşturuyor.

Örneğin. elimde 100 belge varsa ve her sayfada 4 tane görüntülüyorsa; sayfalandırma 1-20 arasında ve hepsini gösteriyor.

Hepsini değil, aynı anda 3 veya 4 tane göstermesini istiyorum.

Bunun gibi bir şey istiyorum: "< 1 ... 5 6 7 ... 20 >" (tabii ki sayfa her değiştiğinde değişecek).

Şu anda şöyle: "< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 >" içerikl arttıkça bu sorun yaratır.

Bana yardım edermisiniz? Teşekkürler.

HTML Kısmı:

<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>
<script type="text/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 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 getPaginationNumbers = () => {
  for (let i = 1; i <= pageCount; i++) {
    appendPageNumber(i);
  }
};

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

  handleActivePageNumber();
  handlePageButtonsStatus();
  
  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", () => {
  getPaginationNumbers();
  setCurrentPage(1);

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

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

  document.querySelectorAll(".pagination-number").forEach((button) => {
    const pageIndex = Number(button.getAttribute("page-index"));

    if (pageIndex) {
      button.addEventListener("click", () => {
        setCurrentPage(pageIndex);
      });
    }
  });
});</script>
WordPress sitede bir template sayfasında yapıyorum.

Teşekkürler.