Introduction

jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional.

Here are a few key points:

Demo

It's oversized too, so you can try it when you're drunk!

Show / hide event log:

Installation

Installation is super easy, for a basic setup you'll need the following HTML:

<div class="pagination">
    <a href="#" class="first" data-action="first">&laquo;</a>
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input type="text" readonly="readonly" data-max-page="40" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <a href="#" class="last" data-action="last">&raquo;</a>
</div>

And now we'll need to initialise the plugin against our HTML:

$('.pagination').jqPagination({
    paged: function(page) {
        // do something with the page variable
    }
});

Customisation

jqPagination is built to be basic, but it does have a couple options and callbacks for customisation.

Options

current_page - option, default: 1
Sets the current page, can also be set using the current-page data attribute on the input element.

max_page - option, default: null
Sets the maximum page, if this option is left null we'll use the max-page data attribute instead, if that doesn't exist we'll assume we only have one page.

page_string - option, default: 'Page {current_page} of {max_page}'
The string to base the input value on, no restrictions on the string, use {current_page} and {max_page} placeholders to allow the plugin to replace the respective numbers.

Callbacks

paged - callback, params: page
The paged callback is called when a valid page request has been made, the page variable simply contains the page requested.

Methods

option - .jqPagination('option', key [, value])

The option method allows to get / set (when supplied with a value) the following values

Setting these values will call their respetive internal functions, and thus will perform other actions such as updating the input text.