Fast Client Side Pagination Plugin - jQuery cPager

cPager is a small yet performant and blazing fast pagination plugin used to paginate the large web content on the client side.

Key features:

• Allows to specify how many entries to show per page.
• Allows to style the pagination links using your own CSS.
• Cross browser and easy to implement.

How to use it:

1. Insert jQuery library together with the cPager.css and cPager.js into the html page.

<link rel="stylesheet" href="css/cPager.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/cPager.js"></script>

2. Create a container to place the generated pagination links.

<div class="turn-page" id="pager"></div>

3. Call the function on the long html list and done.

<ul id="listShow"> 
  <li class="li-item hide">Username-0001</li>
  <li class="li-item hide">Username-0002</li>
  <li class="li-item hide">Username-0003</li>
  <li class="li-item hide">Username-0004</li>
  <li class="li-item hide">Username-0005</li>
  <li class="li-item hide">Username-0006</li>
  <li class="li-item hide">Username-0007</li>
  ...
</ul>

$("#listShow").cPager({

  // how many items per page
  pageSize: 8,

  // container ID
  pageid: "pager", 

  // item class
  itemClass: "li-item"
  
});

4. Set the initial page.

$("#listShow").cPager({

  // how many items per page
  pageSize: 8,

  // container ID
  pageid: "pager", 

  // item class
  itemClass: "li-item",

  // current page index
  pageIndex: 1

});

---

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