Simple Paging using jQuery -Pajinate

By using this library, it allows you to do the paging through the HTML DOM from the client side  (Note: this is not about the ideal way or not the ideal way, I know the ideal way is to do paging server side)

To implement you just need to do 3 things:

1. Create a div container that wraps the container of item that you want to repeat and the navigation div, you can call it whatever you want

2. Create a div inside the container with class “page_navigation”

3. put class “content” on the container of the list item


Code Snippet
  1. <div id=”page_container”>
  2.     <div class=”page_navigation”></div>
  3.     <ul class=”content”>
  4.         <li>
  5.             <p>One</p>
  6.         </li>
  7.         <li>
  8.             <p>Two</p>
  9.         </li>
  10.         <li>
  11.             <p>Three</p>
  12.         </li>
  13.         <li>
  14.             <p>Four</p>
  15.         </li>
  16.         <li>
  17.             <p>Five</p>
  18.         </li>
  19.         <li>
  20.             <p>Six</p>
  21.         </li>
  22.         <li>
  23.             <p>Seven</p>
  24.         </li>
  25.         <li>
  26.             <p>Eight</p>
  27.         </li>
  28.     </ul>
  29. </div>

and I put this code on the document.ready event based on the id set on item 1

Code Snippet
  1. <SCRIPT>
  2.     jQuery(document).ready(function () {
  3.         jQuery(‘#page_container’).pajinate({ items_per_page: 2 });
  4.     });
  5. </SCRIPT>

The source code can be downloaded from here

and you can read the documentation from this github page

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s