Simple Pagination System Full-Featured With Plugin jQuery - Pagination.js

Simple Pagination System Full Featured With Plugin jQuery
Simple Pagination System Full Featured With Plugin jQuery

Pagination.js is a simple, full-featured jQuery based simple pagination system that is powerful, highly customizable and can be styled for your long content to increase the readability of web pages.


  • Supports local data or remote data via Ajax request.
  • Customizable pagination text and numbers.
  • Fully styleable via CSS.
  • Tons of options/methods/events to meet your actual needs.


$ npm install paginationjs --save

# Bower
$ bower install paginationjs --save

How to use it:

1. Load jQuery library and the jQuery Pagination.js script in your document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/pagination-with-styles.js"></script>

2. Call the function and set the data source.

  dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
  callback: function(data, pagination){
    // template method of yourself
    var html = template(data);

3. Configurations.


// Data source
// Array | String | Function | Object
dataSource: '',

// String | Function
locator: 'data',

// Total entries, must be specified when the pagination is asynchronous
totalNumber: 1,

// Default page
pageNumber: 1,

// entries of per page
pageSize: 10,

// Page range (pages on both sides of the current page)
pageRange: 2,

// Whether to display the 'Previous' button
showPrevious: true,

// Whether to display the 'Next' button
showNext: true,

// Whether to display the page buttons
showPageNumbers: true,

showNavigator: false,

// Whether to display the 'Go' input
showGoInput: false,

// Whether to display the 'Go' button
showGoButton: false,

// Page link
pageLink: '',

// 'Previous' text
prevText: '&laquo;',

// 'Next' text
nextText: '&raquo;',

// Ellipsis text
ellipsisText: '...',

// 'Go' button text
goButtonText: 'Go',

// Additional className for Pagination element
//className: '',

classPrefix: 'paginationjs',

// Default active class
activeClassName: 'active',

// Default disable class
disableClassName: 'disabled',

//ulClassName: '',

// Whether to insert inline style
inlineStyle: true,

formatNavigator: '<%= currentPage %> / <%= totalPage %>',

formatGoInput: '<%= input %>',

formatGoButton: '<%= button %>',

// Pagination element's position in the container
position: 'bottom',

// Auto hide previous button when current page is the first page
autoHidePrevious: false,

// Auto hide next button when current page is the last page
autoHideNext: false,

//header: '',

//footer: '',

// Aliases for custom pagination parameters
//alias: {},

// Whether to trigger pagination at initialization
triggerPagingOnInit: true,

// Whether to hide pagination when less than one page
hideWhenLessThanOnePage: false,

showFirstOnEllipsisShow: true,

showLastOnEllipsisShow: true,

// Pagging callback
callback: function(){}


4. Public methods.

// Go to the previous page.

// Go to the next page.

// Go to the custom page. 
container.pagination('go', 8)

// Disable the plugin

// Enable the plugin

// Hide the pagination

// Destroy the plugin

You can find full document on

Live Demo

See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post