Simple Boostrap Pagination Plugin With jQuery

A lightweight and easy-to-use jQuery plugin that allows you to page the large text content using Bootstrap's pagination component.

How to use it:

1. Load the necessary jQuery and Bootstrap framework in the html page.

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

2. Load the simple-bootstrap-paginator.js script after jQuery library.

<script src="simple-bootstrap-paginator.js"></script>

3. Create a container for the pagination plugin.

<div id="pagination" class="text-center"></div>

4. Render a default Bootstrap pagination inside the container you created.

var pag = $('#pagination').simplePaginator({
    // options here
});

5. All configuration options with default values.

var pag = $('#pagination').simplePaginator({

    // the number of total pages
    totalPages: 7,

    // maximum of visible buttons
    maxButtonsVisible: 5,

    // page selected
    currentPage: 1,

    // text labels for buttons
    nextLabel: 'next',
    prevLabel: 'prev',
    firstLabel: 'first',
    lastLabel: 'last',

    // specify if the paginator click in the currentButton
    clickCurrentPage: true,

    // called when a page is changed.
    pageChange: function(page) { console.log(page) }

});

6. API methods.

// set totalPages option
pag.simplePaginator('setTotalPages', 10);

// go to page 3
pag.simplePaginator('changePage', 3);

Changelog:

2019-01-30

• adding bootstrap classes to li and a tags

2016-03-20

• setPageFn fix

2016-01-15

• added hide function and usage example
• some methods changes

2016-01-14

• added hide function

---

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