Versatile jQuery Pagination Plugin For Any Content - Paging.js

Paging.js is a lightweight, flexible, customizable jQuery based pagination framework which dynamically generates navigation links and buttons for any long web content. You can find more demos in the example folder.

Features:

• Custom pagination format.
• AJAX enabled.
• Cookies enabled.
• Callback functions.
• Supports any web content such as text, lists, tables, images and much more.
• Easy to customize using your own CSS styles.

Basic usage:

1. Download and include the minified version of the jQuery Paging.js plugin after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.paging.min.js"></script>

2. Create a placeholder element for the pagination controls.

<div id="pagination"></div>

3. The JavaScript to render a basic pagination inside the container element you just created.

// $("#el").paging(number, options)
$("#pagination").paging(100, {
  format: '[< ncnnn >]', // custom format
  onSelect: function(page) {
    // add code which gets executed when user selects a page
  },
  onFormat: function(type) {
    switch (type) {
      case 'block': // n and c
          return '<a href="#">' + this.value + '</a>';
      case 'next': // >
          return '<a href="#">&gt;</a>';
      case 'prev': // <
          return '<a href="#">&lt;</a>';
      case 'first': // [
          return '<a href="#">first</a>';
      case 'last': // ]
          return '<a href="#">last</a>';
    }
  }
});

4. Default configuration options.

// $("#el").paging(number, options)
$("#pagination").paging(100, {

  // number of elements overlap
  "lapping": 0, 

  // number of elements per page
  "perpage": 10, 

  // current page
  "page": 1, 

  // refresh callback information
  "refresh": {
    "interval": 10,
    "url": null
  }, 

  // visual format string
  "format": "", 

  // set to true, if you want to disable the pagination for a while. 
  "lock": false, 

  // set to true if you want the next/prev buttons go circular
  "circular": false, 


  // Alternative click handler to bypass onSelect mechanism
  "onClick": null

});

Advanced usage:

1. Create an html list based pagination.

<ol id="paging">
  <li>Prev</li>
  <li>Page #n</li>
  <li>Page #n</li>
  <li>Page #c</li>
  <li>Page #n</li>
  <li>Page #n</li>
  <li>Page #n</li>
  <li>Page #n</li>
  <li>Next</li>
</ol>

$("#paging").easyPaging(100, {
  onSelect: function(page) {
    console.log("You are on page " + page + " and you will select elements "+(this.slice[0]+1) + "-" + this.slice[1]+"!!!");
  }
});

2. onFormat callback.

"onFormat": function(type) { 

  switch (type) {

      case 'block':

          if (!this.active)
              return '<span class="disabled">' + this.value + '</span>';
          else if (this.value != this.page)
              return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
          return '<span class="current">' + this.value + '</span>';

      case 'right':
      case 'left':

          if (!this.active) {
              return "";
          }
          return '<a href="#' + this.value + '">' + this.value + '</a>';

      case 'next':

          if (this.active) {
              return '<a href="#' + this.value + '" class="next">Next &raquo;</a>';
          }
          return '<span class="disabled">Next &raquo;</span>';

      case 'prev':

          if (this.active) {
              return '<a href="#' + this.value + '" class="prev">&laquo; Previous</a>';
          }
          return '<span class="disabled">&laquo; Previous</span>';

      case 'first':

          if (this.active) {
              return '<a href="#' + this.value + '" class="first">|&lt;</a>';
          }
          return '<span class="disabled">|&lt;</span>';

      case 'last':

          if (this.active) {
              return '<a href="#' + this.value + '" class="prev">&gt;|</a>';
          }
          return '<span class="disabled">&gt;|</span>';

      case 'fill':
          if (this.active) {
              return "...";
          }
  }
  return ""; // return nothing for missing branches

},

3. onSelect callback.

"onSelect": function(page) { 

  /** EXAMPLE SLICE **

  var data = this.slice;

  content.slice(prev[0], prev[1]).css('display', 'none');
  content.slice(data[0], data[1]).css('display', 'block');

  prev = data;

  **/


  /** EXAMPLE COOKIE **

  setCookie("current", page)
  console.log(this);

  **/


  /** EXAMPLE AJAX **

  $.ajax({
      "url": '/data.php?start=' + this.slice[0] + '&end=' + this.slice[1] + '&page=' + page,
      "success": function(data) {
          // content replace
      }
  });

  **/

  // Return code indicates if the link of the clicked format element should be followed (otherwise only the click-event is used)
  return true;

},

4. onRefresh callback.

"onRefresh": function(json) { 

  /** EXAMPLE **
  if (json.number) {
      Paging.setNumber(json.number);
  }

  if (json.options) {
      Paging.setOptions(json.options);
  }

  Paging.setPage(); // Call with empty params to reload the paginator
  **/
  
}

5. Lock and unlock the pagination.

var paging = $("#el").paging();

// Lock the pager
paging.setOptions({lock: true});

// Unlock the pager
paging.setOptions({lock: false});

Changelog:

2019-03-27

• JS update

---

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