javascript - Limiting The Number of Shown Pages on The Pagination

View Original

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>

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>

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

Answer

Solution:

Please use the following pagination :

$_GET["page"] is the page you want to see
totalpages (now 15) is the total number of pages
offset is the number of pages (1+offset * 2) you want to display before and after the Ellipses (if 1 it means (1+1 * 2) = 3 pages, if 2 it means (1+2 * 2)= 5 pages)

<style>
    .pagination    {
    text-decoration:none;
    color:black;
    font-family:arial;
    font-size:12px;
    }
</style>    

<script>

var totalpages=15;
var currentpage=<?php echo $_GET["page"]; ?>;
var offset=1;
var offsetnum=(offset*2) +1;
var index=0;
var index0=0;
var starttag="<a class=pagination href='testpage.php?page=";
var endtag="</a>";


if (totalpages >0) {
index0=currentpage-1;
if (index0 <1) { index0=1; }
    
document.write(starttag+index0+"'>"+"<" + endtag + " ");

if (totalpages <=(offsetnum+2)) {

  for (index =1; index <=totalpages; index++) {
    if (index !=currentpage){
        document.write(starttag+index+"'>"+index + endtag + " ");
    }else{
    document.write("<B>"+starttag+index+"'>"+index + endtag + "</B> ");
    }
  }
} else {

if (currentpage<=(1+offset)) {
  var startpage=2;
  var endpage=2+(offsetnum)-1;
} else {

  if (currentpage>=(totalpages-offset)) {
  var startpage=(totalpages-1)-(offset*2);
  var endpage=(totalpages-1);
  } else {
    var startpage=currentpage-offset;
    var endpage=currentpage+offset;
  }    
}

if (currentpage!=1){
document.write(starttag+1+"'>1" + endtag + " ");
   }else{
document.write("<B>"+starttag+1+"'>1" + endtag+"</B>" + " ");
}

if (startpage>2) document.write(".. ");

 for (index =startpage; index <=endpage; index++) {
   if (currentpage!=index){
     document.write(starttag+index+"'>" + index + endtag + " ");
   }else{
   document.write("<B>" +starttag+index+"'>" + index + endtag + "</B> ");
   }
  }

if (endpage < (totalpages-1)) document.write(".. ");
  if (currentpage!=totalpages){
  document.write(starttag+totalpages+"'>" + totalpages + endtag + " ");
   }else{
  document.write("<B>"+starttag+totalpages+"'>" + totalpages + endtag + "</B> ");
  }
}

index0=currentpage+1;
if (index0 >totalpages) { index0=totalpages; }
document.write(starttag+index0+"'>"+">" + endtag + " ");
}    
</script>

Fully working sandbox link:

http://www.createchhk.com/SOanswers/testpage.php?page=10

Source