javascript - Limiting The Number of Shown Pages on The Pagination

I'm trying to make a pagination for my .pdf file gallery.

I'm using a free pagination template I found online. It works fine but the problem is it creates infinite page numbers.

For example, if I have 100 documents and display 4 per page; the pagination goes from 1-20 and shows them all.

I want it to show 3 at a time, not all of them.

I want something like this: "< 1 ... 5 6 7 ... 20 >" (will change of course each time the page changes).

Right now it's like this: "< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 >"

Can you guys help me out? Thanks.

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>
Copy code

Java:

<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>
Copy code

I am trying to build a pagination that works properly as I want it to.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.