Simple Boostrap Pagination Plugin With jQuery
File Size: | 7.1 KB |
---|---|
Views Total: | 8048 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.