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.

Installation:

# NPM
$ 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.
myPagination.goToPage(pageNumber)

// Returns current page count.
myPagination.getPageCount()

// Returns current page number.
myPagination.getCurrentPage()

Changelog:

2023-05-02

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

2022-10-11

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

2022-02-18

• v2.2.0

2022-01-20

• Add missing container type option

2019-03-07

• v2.1.0

2018-09-27

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

2018-01-10

• 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.