Highly Customizable jQuery Pagination Component - jqPaginator

jqPaginator is a lightweight jQuery based pagination component that makes it easier to dynamically paginate any group of HTML elements on a page. Supports any CSS frameworks (e.g. Bootstrap) and easy to customizable via your own CSS styles.

Installation:

# NPM
$ npm install jq-paginator --save

How to use it:

1. Create an empty html list for the pagination component.

<ul class="pagination" id="pagination-demo">
</ul>

2. Put jQuery library and the jQuery jqPaginator plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jq-paginator.js"></script>

3. The JavaScript to render a default pagination inside the html list.

$.jqPaginator('#pagination-demo', {
  // options here
});

4. Customize the html structure of the pagination component.

$.jqPaginator('#pagination-demo', {
  wrapper: '',
  first: '<li class="first"><a href="javascript:;">First</a></li>',
  prev: '<li class="prev"><a href="javascript:;">Previous</a></li>',
  next: '<li class="next"><a href="javascript:;">Next</a></li>',
  last: '<li class="last"><a href="javascript:;">Last</a></li>',
  page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
});

5. Set the active / disable CSS classes.

$.jqPaginator('#pagination-demo', {
  disableClass: 'disabled',
  activeClass: 'active'
});

6. More options to config the pagination component.

$.jqPaginator('#pagination-demo', {
  totalPages: 0,
  totalCounts: 0,
  pageSize: 0,
  currentPage: 1,
  visiblePages: 7,
});

7. The plugin comes with a callback function which will be fired on each page change.

$.jqPaginator('#pagination-demo', {

  // e.g.
  // onPageChange: function (num, type) {
  //   $('p').text(type + '：' + num);
  // }
  onPageChange: null
  
});

Changelog:

2019-02-15

• v2.0.2

---

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