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.

Download Fork on GitHub

Here are a few key points:

• Design agnostic
• Customisable
• Degrades beautifully
• Super simple to integrate with your app / site
• Uses jQuery... who doesn't love jQuery?!

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

• current_page
• max_page

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

Feedback and Support

If you feel improvements can be made to jqPagination fork the project and put in a pull request. If you want to report a bug head on over to GitHub issues. If you're having problems ask a question on Stack Overflow and tag the question with jqpagination.