Clone this wiki locally
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.
Pajinate expects a certain – although relatively flexible – HTML markup structure. Essentially you will need 4 things:
- One or more DIVs that Pajinate will attach the navigation links to. [If no options are specified these DIV should be assigned a CSS class named ‘page_navigation’]
- One HTML element that serves as a container for all the elements you wish to appear in the paginated-pages. [If no options are specified this container should be assigned CSS class named ‘content’]
- One or more list items (of almost any element type); they must be direct children of the container mentioned in 2.
- A container element that wraps the other three element groups.
<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.
The Pajinate source and examples are available here.
Pajinate offers the following options upon initialisation:
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]
Disable pagination when the number of page = 1. [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).