Dynamic Pagination Control With jQuery - Paginatify.js

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.

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.

  • Publication date: 01.02.2019
  • Source