Dynamic Pagination Control With jQuery - Paginatify.js
| File Size: | 17 KB |
|---|---|
| Views Total: | 10122 |
| 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.











