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.

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

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

wrap_around
Next/prev navigation wrap around the navigation list if set to true. [default = false]

show_first_last
Prevents first & last navigation links from loading if set to false. [default = true]

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