A Simple and Lightweight jQuery Pagination Plugin | jqPaginator.js

How to make use of it:

1. The plugin requires the newest jQuery library to work.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Load the Stylesheet jqpaginator.css for the essential styling of the paginator.

<link rel="stylesheet" href="./css/jqpaginator.css" />

3. Load the JavaScript jqpaginator.js after jQuery.

<script src="./js/jqpaginator.js"></script>

4. Create a component to hold the pagination controls.

<div id="example"></div>

5. Define your information and specify the overall variety of data as follows:

function createData() {
  var arr = [];
  var i = 0;
  while (i < 1000) {
      arr.push("Item: " + i.toString());
      i++;
  }
  return arr;
}
function dataFunc(done) {
  var data = [];
  while (data.length < itemsPerPage) {
      var num = Math.floor(Math.random() * 100);
      data.push(num);
  }
  var handler = function() {
      done(data, 100);
  };
  setTimeout(handler, 1000);
}

6. Determine how you can render the information utilizing the renderer.

function renderer(data) {
  $('#content').empty();
  $.each(data, function(i, v) {
    $('#content').append("<p>" + v + "</p>");
  });
};

7. Initialize the plugin to generate pagination on the webpage.

$('#example').jqpaginator({
  data: createData(),
  render: renderer
});

8. Customize the paginator by overriding the default options as follows:

$('#example').jqpaginator({
  // items to show per page
  itemsPerPage: 10,
  // text for next/prev buttons
  buttonText: ["<<", ">>"],
  // shows pagination links
  showNumbers: true,
  // shows next/prev buttons
  showButtons: true,
  // shows an input which allows you to directly go to specific page
  showInput: true,
  // the margin between pagination links
  numberMargin: 2
});

9. API strategies.

// get the current page num
$('#example').jqpaginator('getPage');
// reload data
$('#example').jqpaginator('reload');
// go to a specific page
$('#example').jqpaginator('goto', 5);
// destroy the paginator
$('#example').jqpaginator('destroy');

10. Default CSS classes which can be utilized to customize the pagination controls utilizing your individual CSS.

parentcls: 'jqpaginator',
wrapcls: 'jqp-wrap',
pageListcls: 'jqp-pages',
pageItemcls: 'jqp-page',
inputcls: 'jqp-input',
prevcls: 'jqp-prev',
nextcls: 'jqp-next',
activecls: 'jqp-active',
disabledcls: 'jqp-disable',

jQuery Plugin For Pagination On Dynamic Data, jq paginator Plugin/Github

See Demo And Download