Simple Flexible Pagination Plugin - jQuery Paginator

A simple, flexible, customizable jQuery paginator to provide a better pagination experience for multi-page web contents.

Features:

• Auto collapse long pagination links.
• Auto enable/disable next & prev buttons.
• Allows to dynamically change the total number of pages.

How to use it:

1. Load the stylesheet paginator-style.css for the basic styling of the pagination control.

<link rel="stylesheet" href="paginator-style.css" />

2. Create a container element to hold the pagination links.

<div class="paginator js-paginator">
</div>

3. Load the minified version of the paginator plugin after the latest jQuery library.

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

4. Initialize the plugin and specify the total pages.

paginator.initPaginator({
  'totalPage': 50
});

5. Customize the next/prev buttons.

paginator.initPaginator({
  'totalPage': 50,
  'previousPage': 'Next',
  'nextPage': 'Previous'
});

6. Trigger a function when a page is clicked. In this example, we're going to output the page num you selected.

function myFunc() {
  var selectdPg = $('.js-paginator').data('pageSelected');
  $('.output').text('Page ' + selectdPg);
}

paginator.initPaginator({
  'totalPage': 50,
  'triggerFunc': myFunc
});

7. Apply an extra CSS class to the pagination control.

paginator.initPaginator({
  'totalPage': 50,
  'paginationClass': 'paginatorCustomClass'
});

8. Adjust the number of pages using the paginatorPages method. Available parameters:

• pageTotal: total number of pages.
• customClass: custom CSS class
• selectedPage: initial page, defaults to 1

paginator.paginatorPages(pageTotal, customClass, selectedPage);

---

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