Convenient Pagination Plugin With Bootstrap 3/4 And jQuery UI - Pagination.js

File Size: 29.6 KB
Views Total: 9624
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Convenient Pagination Plugin With Bootstrap 3/4 And jQuery UI - Pagination.js

Pagination.js is a lightweight yet customizable jQuery plugin used to paginate your large data set using Bootstrap 4 or Bootstrap 3 pagination component and jQuery UI.

Main Features:

  • Based on Bootstrap pagination component.
  • Supports pagination sliders using jQuery UI.
  • Callback function for each page click.
  • Allows to set the maximum number of pages to be shown.
  • Lots of API.


$ npm install s-pagination --save

Basic usage:

1. Load jQuery library and other required JS / CSS files in the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="/path/to/jquer.min.js" ></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Download and load the jQuery Pagination.js plugin's files in the page.

<link rel="stylesheet" href="dist/pagination.css">
<script src="dist/pagination.js"></script>

3. Create an empty container on which the pagination should be placed.

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

4. The JavaScript to render a default pagination inside the container you created.

var myPagination = new Pagination({
    container: $("#pagination-demo")

5. Render the pagination for specified items count and page size.

var itemsCount = 300;
var itemsOnPage = 10;

var myPagination = new Pagination({
    container: $("#pagination-demo")

myPagination.make(itemsCount, itemsOnPage);

6. Default configuration options.

var myPagination = new Pagination({

    // Where to render this component
    container: '',

    // Called when user change page by this component
    // contains one parameter with page number
    pageClickCallback: function(){},

    // The URL to which is browser redirected after user change page by this component
    pageClickUrl: '',

    // If true, pageClickCallback is called immediately after component render (after make method call)
    callPageClickCallbackOnInit: false,

    // The number of visible buttons in pagination panel
    maxVisibleElements: 13,

    // Shows slider for fast navigation between pages
    showSlider: false,

    // Shows text input box for direct navigation to specified page
    showInput: false,

    // The content of tooltip displayed on text input box.
    inputTitle: '',

    // If false, standard mode is used (show arrows on the edges, border page numbers, shorting dots and page numbers around current page). 
    // If true, standard mode is enhanced, so page number between border number and middle area is also displayed.
    enhancedMode: false

7. API methods.

// Render the component for specified items count and page size. 
// DefaultPageNumber parameter is optional and sets active page.
myPagination.make(itemsCount, itemsOnPage, defaultPageNumber)

// Force "Go to page" action. Component is rerendered to specified page and actions (pageClickCallback, pageClickUrl) are invoked.

// Returns current page count.

// Returns current page number.



  • v3.0.1: Fix duplicated left border on triple dot elements


  • v3.0.0: Fixed appending of default arrow to "goToButtonLabel"


  • v2.2.0


  • Add missing container type option


  • v2.1.0


  • Remove bower, fix compatibility with bootstrap 4, add dependency, update package version


  • Option for calling callback on init moved to Options object

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