Convenient Long List Pagination Plugin With jQuery - HZpagination.js

Convenient Long List Pagination Plugin With jQuery - HZpagination.js

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

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>
<div id="pagination-container">
  <p class='paginacaoCursor' id="beforePagination"><</p>
  <p class='paginacaoCursor' id="afterPagination">></p>

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

<script src="" 
<script src="HZpagination.js"></script>

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

  // 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.

  • Publication date: 20.02.2018
  • Source