Easy Client-side Pagination Plugin with jQuery - Paginate.js

Paginate.js is a lightweight and easy-to-use jQuery client-side pagination plugin that allows you to paginate through a large set of html content.

How to use it:

1. Load the jquery.paginate.css in the head section of the html document. You can find all default CSS styles of the pagination plugin in this CSS file.

<link rel="stylesheet" href="jquery.paginate.css">

2. The sample Html. In this case, we're going to use the Paginate.js plugin to handle the pagination for elements inside a list.

<ul id="example">
  
  <li>
    Item 1
  </li>   

  <li>
    Item 2
  </li>

  <li>
    Item 3
  </li>

  ...
        
  <li>
    Item n
  </li>      
  
</ul>

3. Load jQuery library and the jquery.paginate.js at the end of the html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.paginate.js"></script>

4. The JavaScript to generate a default pagination for your list.

$('#example').paginate();

5. Customize the pagination plugin with the following options.

$('#example').paginate({

  // how many items per page
  perPage:      5,    

  // scroll to top of the container if an user clicks on a pagination link
  autoScroll:     true,     

  // which elements to target 
  scope:        '',     

  // where the pagination will be displayed
  paginatePosition:   ['bottom'], 

  // custom html tags for the pagination
  containerTag:     'nav',
  paginationTag:      'ul',
  itemTag:      'li',
  linkTag:      'a',

  // use hash locations
  useHashLocation:    true,   

  // triggered when a pagination link is clicked
  onPageClick:    function() {} 

});

---

This awesome jQuery plugin is developed by bzzrckt. For more Advanced Usages, please check the demo page or visit the official website.