Dynamic Pagination Control With jQuery - Paginatify.js

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

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.