Tiny Bootstrap-style Pagination Component With jQuery - blade-pagination
File Size: | 4.84 KB |
---|---|
Views Total: | 6491 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

blade-pagination is a small and cross-browser jQuery pagination plugin used to create Bootstrap-style pagination links for your long web content.
How to use it:
1. Make sure you first have jQuery library installed properly in your webpage.
<script src="//code.jquery.com/jquery.min.js"></script>
2. Include blade-pagination.css
inside your head
tag and jquery.blade-pagination.js
just before the closing body tag.
<link rel="stylesheet" href="blade-pagination.css"> <script src="jquery.blade-pagination.js"></script>
3. Create an html list for the pagination component and specify the current page and total pages using data
attributes as follows:
<ul id="demo" class="blade-pagination" data-current="4" data-total="8"> </ul>
4. Initialize the plugin and done.
$('#demo').bladePagination();
5. Config the plugin by passing the following options to the bladePagination()
object.
$('#demo').bladePagination({ // max number of pages maxPageNum: 5, // label text firstLabel: '|<', // |< prevLabel: '<', // < nextLabel: '>', // > lastLabel: '>|', // >| moreLabel: '...', // callback clickPage: function(page) {} });
Change log:
2017-11-30
- CSS update
This awesome jQuery plugin is developed by panfeng-pf. For more Advanced Usages, please check the demo page or visit the official website.