This time I will share jQuery Plugin and tutorial about Dynamically Generate Pagination Links With jQuery Pagination.js, hope it will help you in programming stack.
A small (~1kb) and customizable jQuery plugin that allows developers to dynamically generate pagination links for long content & larger lists.
How to use it:
1. By default the plugin uses Bootstrap 4’s stylesheet to style the pagination links. Without the need of Bootstrap JS.
2. Load the Pagination.js script after jQuery but before the closing body tag.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="pagination.js"></script> |
3. Create an empty unordered list in which the plugin will generate the pagination links.
2 |
<ul class="pagination"></ul> |
4. Call the function on the top container and specify the number of items to paginate.
2 |
$('#page').Pagination({ |
5. Specify the number of pages to generate. Default: 5.
2 |
$('#page').Pagination({ |
6. Set the initial page. Default: page 1.
2 |
$('#page').Pagination({ |
7. Limit the number of items to display per page. Default: 1.
2 |
$('#page').Pagination({ |
8. Return the current page using the callback function:
2 |
$('#page').Pagination({ |
9. Determine whether to display the first/last labels. Default: false.
2 |
$('#page').Pagination({ |
10. You can also apply custom styles to the pagination links without Bootstrap 4.
Changelog:
2019-05-02
- Added update new Boundary option
This awesome jQuery plugin is developed by jounger. For more Advanced Usages, please check the demo page or visit the official website.
