Creates a dynamic pagination system

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<nav class="pagination"></nav>

CSS

nav.pagination {
  list-style: none;
  padding: 0px;
  margin: 20px;
}
nav.pagination>a{
  width: 32px;
  line-height: 32px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

JavaScript

class Pagination{

  constructor(element,start,count,perpage,maxlinks){

    this.element = element;
    this.start = start;
    this.count = count;
    this.perpage = perpage;
    this.maxlinks = maxlinks;
    
    this.buildPagination();

  }

  buildPagination(){

    let i = 0;

    let page = 1;

    let totalLinks = Math.ceil(this.count/this.perpage);

    while(i < this.count){

      if(totalLinks <= this.maxlinks){

        let link = $('<a href="javascript:void(0);">' + page + '</a>');

        this.element.append(link);

        i+=this.perpage;

        page++;

      } else {

        //if(i > (this.start-(this.perpage*(totalLinks/2)))){

          let link = $('<a href="javascript:void(0);">' + page + '</a>');

          this.element.append(link);

          i+=this.perpage;

          page++;

        //}

        

      }

    }

  }

}

let pagination = new Pagination($('.pagination'),1000,2000,20,10);