/HZpagination.js

A jquery plugin for paginating existing lists! Demo:

Primary LanguageHTML

HZpagination.js

A jquery plugin for paginating existing lists!

QUICK INSTALATION

JQuery>Path to Jquery<

<script type="text/javascript" src="Path/to/HZpagination.js"></script>

HTML STRUCTURE

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

CONFIGURATION: (ON HZpagination.js FILE)

 var HZperPage = 2, //number of results per page
     
     HZwrapper = 'paginationTable', //wrapper class
 
     HZlines   = 'tableItem', //items class
 
     HZpaginationId ='pagination-container', //id of pagination container
 
     HZpaginationArrowsClass = 'paginacaoCursor', //set the class of pagination arrows
 
     HZpaginationColorDefault =  '#880e4f', //default color for the pagination numbers
 
     HZpaginationColorActive = '#311b92', //color when page is clicked
 
     HZpaginationCustomClass = 'customPagination';  //custom class for styling the pagination (css)

HOPE YOU LIKE IT!