Performant Large list Pagination Plugin - JOLD Paginator

File Size: 35.9 KB
Views Total: 2375
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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 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.


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;



  • 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.