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
Sample
- <div id=”page_container”>
- <div class=”page_navigation”></div>
- <ul class=”content”>
- <li>
- <p>One</p>
- </li>
- <li>
- <p>Two</p>
- </li>
- <li>
- <p>Three</p>
- </li>
- <li>
- <p>Four</p>
- </li>
- <li>
- <p>Five</p>
- </li>
- <li>
- <p>Six</p>
- </li>
- <li>
- <p>Seven</p>
- </li>
- <li>
- <p>Eight</p>
- </li>
- </ul>
- </div>
and I put this code on the document.ready event based on the id set on item 1
- <SCRIPT>
- jQuery(document).ready(function () {
- jQuery(‘#page_container’).pajinate({ items_per_page: 2 });
- });
- </SCRIPT>
The source code can be downloaded from here
and you can read the documentation from this github page
Leave a Reply