Home

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.

Expected Markup

Pajinate expects a certain – although relatively flexible – HTML markup structure. Essentially you will need 4 things:

1. 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’]


2. 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’]


3. One or more list items (of almost any element type); they must be direct children of the container mentioned in 2.


4. A container element that wraps the other three element groups.

Demo

Multiple implementation demos can be found in this page.

Source Code

The Pajinate source and examples are available here.

Configuration

Pajinate offers the following options upon initialisation:

items_per_page
A number which determines the maximum number of items to show on any ‘page’. [default = 10]

item_container_id
The ID or CLASSNAME of the element that contains all the list items. [default = ‘.content’]

nav_panel_id
The ID or CLASSNAME of the element(s) that host the navigation links. [default = ‘.page_navigation’]

num_page_links_to_display
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]

start_page
The page number you’d like to display first [default = 0]

nav_label_first
The label for the link that navigates to the first paginated page. [default = ‘First’]

nav_label_prev
The label for the link that navigates to the previous paginated page. [default = ‘Prev’]

nav_label_next
The label for the link that navigates to the next paginated page. [default = ‘Next’]

nav_label_last
The label for the link that navigates to the last paginated page. [default = ‘Last’]

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).