This time I will share jQuery Plugin and tutorial about Dynamic Pagination Component For jQuery – Pajinatify, hope it will help you in programming stack.
The Pajinatify jQuery plugin lets you dynamically render pagination links with next/prev navigation arrows for long web content.
You can specify the total number of records and the number of records to show per page.
Fully responsive based on CSS3 flexbox.
How to use it:
1. Include the stylesheet jquery.pajinatify.css for the basic styling of the pagination control.
1 |
<link rel="stylesheet" href="jquery.pajinatify.css"> |
2. Include the minified version of the jQuery Pajinatify plugin after jQuery.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="dist/jquery.pajinatify.js"></script> |
3. Create a pagination container and specity the number of pages & records with the following data attributes:
1 |
<div class='pagination' |
2 |
data-total-count='1000' |
4. Call the function on the container and get the current page when the pagination changes.
1 |
$('.pagination').pajinatify({ |
2 |
onChange: function (currentPage) { |
3 |
console.log(currentPage); |
5. Goto a specific page.
2 |
$('.pagination').pajinatify('set', 5, 1000); |
6. Destroy the pagination component.
1 |
$('.pagination').pajinatify('destroy'); |
This awesome jQuery plugin is developed by digitalify. For more Advanced Usages, please check the demo page or visit the official website.
