adnen chouibi edited this page May 28, 2014 · 8 revisions
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.

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


Multiple implementation demos can be found in this page.

Source Code

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