Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages. Not only is it a simpler alternative to server-side implementations, the time between paginated-page loads is almost nil (up to a reasonable page-size of course).
Pajinate also accepts several options, which will be describe at the end of the article.
<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>
Multiple implementation demos can be found in this page.
A number which determines the maximum number of items to show on any ‘page’. [default = 10]
The ID or CLASSNAME of the element that contains all the list items. [default = ‘.content’]
The ID or CLASSNAME of the element(s) that host the navigation links. [default = ‘.page_navigation’]
The number of page links to display at one time i.e. if you have a total of 20 page links but only want to display 3 at a time set this value to 3. [default = 20]
The page number you’d like to display first [default = 0]
The label for the link that navigates to the first paginated page. [default = ‘First’]
The label for the link that navigates to the previous paginated page. [default = ‘Prev’]
The label for the link that navigates to the next paginated page. [default = ‘Next’]
The label for the link that navigates to the last paginated page. [default = ‘Last’]
Next/prev navigation wrap around the navigation list if set to true. [default = false]
Prevents first & last navigation links from loading if set to false. [default = true]
The demo and source offer several examples demonstrating various ways in which to configure and use Pajinate (including embedding multiple Pajinate elements in a single page).
Last edited by wesnolte,