Performant Large list Pagination Plugin - JOLD Paginator

JOLD Paginator is a lightweight, blazing-fast, easy-to-style, client-side pagination plugin that dynamically renders pagination links for the long content list.

How to use it:

1. Download and import the JavaScript file jquery.jold.paginator.min.js after jQuery (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.jold.paginator.min.js"></script>

2. Add indicator & paginator containers to your long content list.

<div class="items-container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  ...
</div>

<div class="pagination-indicator"></div>
<ul class="pagination-container"></ul>

3. Initiate the paginator on the .items-container element.

var myPaginator = new $('.items-container').joldPaginator({

    // the number of items per page
    'perPage': 5,

    // selectors
    'items': '.item',
    'paginator': '.pagination-container',

    // custom indicator
    'indicator': {
      'selector': '.pagination-indicator',
      'text': 'Showing item {start}-{end} of {total}',
    }
    
});

4. Sometimes you might need to re-init the paginator, e.g. add/remove items.

myPaginator.init();

5. Style the pagination links whatever you like.

.pagination-container .pagination__item {
  margin: 0 10px 0 0;
  padding: 0;
  display: inline-block;
}

.pagination-container .pagination__item .pagination__link {
  display: block;
  padding: 10px 15px;
  background-color: rgba(85, 85, 85, .1);
  color: rgb(218, 72, 39);
  text-decoration: none;
  border-radius: 27px;
}

.pagination-container .pagination__item--current .pagination__link {
  color: rgb(255, 255, 255);
  background-color: rgb(218, 72, 39);
  font-weight: 700;
}

Changelog:

2019-11-29

• v1.0.4

---

This awesome jQuery plugin is developed by joldnl. For more Advanced Usages, please check the demo page or visit the official website.