Dynamic Pagination Control With jQuery - Paginatify.js
File Size: | 17 KB |
---|---|
Views Total: | 9388 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Paginatify.js is a minimal clean jQuery paginator which lets you dynamically generate pagination links to make your long web content better readability.
How to use it:
1. Load the stylesheet jquery.pajinatify.css
for the basic styling of the pagination links.
<link rel="stylesheet" href="dist/jquery.pajinatify.css">
2. Create a container element to hold the pagination links.
<div class="pagination"> </div>
3. Load jQuery JavaScript library and the JavaScript jquery.pajinatify.js
at the end of the document.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="dist/jquery.pajinatify.js"></script>
4. Specify the total count and the number of entries per page using the HTML data
attributes.
<div class="pagination" data-total-count="400" data-take="10"> </div>
5. Initialize the plugin by calling the function pajinatify
on the container element.
$(function(){ $('.pagination').pajinatify(); });
6. Execute a function when the page changes.
$('.pagination').pajinatify({ onChange: function (currentPage) { console.log(currentPage); }, });
7. The plugin also supports RTL text direction.
$('.pagination').pajinatify({ dir: 'rtl' });
8. Go to a specified page/entry.
$('.pagination').pajinatify('set', 5, 203);
9. Destroy the pagination plugin.
$('.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.