Convenient Long List Pagination Plugin With jQuery - HZpagination.js

Convenient Long List Pagination Plugin With jQuery - HZpagination.js
File Size: 3.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

HZpagination.js is a lightweight jQuery plugin which provides a convenient and client-side pagination experience on your long html lists.

How to use it:

1. Add the pagination control to your long html list as these:

<ul class="paginationList">
  <li class="listItem"> 1 </li>
  <li class="listItem"> 2 </li>
  <li class="listItem"> 3 </li>
  <li class="listItem"> 4 </li>
  <li class="listItem"> 5 </li>
  <li class="listItem"> 6 </li>
  <li class="listItem"> 7 </li>
  <li class="listItem"> 8 </li>
  <li class="listItem"> 9 </li>
  <li class="listItem"> 10 </li>
  <li class="listItem"> 11 </li>
  <li class="listItem"> 12 </li>
  <li class="listItem"> 13 </li>
  <li class="listItem"> 14 </li>
  <li class="listItem"> 15 </li>
  <li class="listItem"> 16 </li>
  ...
</ul>
<div id="pagination-container">
  <p class='paginacaoCursor' id="beforePagination"><</p>
  <p class='paginacaoCursor' id="afterPagination">></p>
</div>

2. Add the latest jQuery library and the jQuery HZpagination.js to the webpage.

<script src="http://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<script src="HZpagination.js"></script>

3. That's it. Customize the pagination control by overriding the following parameters in the HZpagination.js.

var 
  // number of results per page
  HZperPage = 5,

  // wrapper class
  HZwrapper = 'paginationList',

  // items class
  HZlines   = 'listItem',

  // id of pagination container
  HZpaginationId ='pagination-container',

  // set the class of pagination
  HZpaginationArrowsClass = 'paginacaoCursor',

  // default color for the pagination numbers
  HZpaginationColorDefault =  '#880e4f',

  // color when page is clicked
  HZpaginationColorActive = '#311b92', 

  // custom class for styling the pagination (css)
  HZpaginationCustomClass = 'customPagination'; 

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