Fork me on GitHub

Check out my GitHub page for other plugins.

simplePagination.js

A simple jQuery pagination plugin and 3 CSS themes.

CSS Themes

"light-theme"

Prev12345…1920

"dark-theme"

Prev123…181920

"compact-theme"

Download

Get the zip containing the plugin and the CSS themes here.

How To Use

Step 1: together with JQuery, include jquery.simplePagination.js in your page:

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>

Step 2: OPTIONAL - include the CSS file with the 3 default themes

<link rel="stylesheet" src="path_to/simplePagination.css"></script>

If you skip this step, you will need to define your own styles.

Step 3: call the function on your pagination placeholder:

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

If necessary, you can specify the number of pages directly, via "pages" parameter, instead of "items" and "itemsOnPage" which are used by the plugin to automatically calculate the number of pages.

Available options

items Integer Default: 1 Total number of items that will be used to calculate the pages.
itemsOnPage Integer Default: 1 Number of items displayed on each page.
pages Integer Optional If specified, items and itemsOnPage will not be used to calculate the number of pages.
displayedPages Integer Default: 5 How many page numbers should be visible while navigating.
Minimum allowed: 3 (previous, current & next)
edges Integer Default: 2 How many page numbers are visible at the beginning/ending of the pagination.
currentPage Integer Default: 1 Which page will be selected immediately after init.
hrefText String Default: "#page-" Text that will be used to create the href attribute, together with the page number.
prevText String Default: "Prev" Text to be display on the previous button.
nextText String Default: "Next" Text to be display on the next button.
cssStyle String Default: "light-theme" The class of the CSS theme.
selectOnClick Boolean Default: true Set to false if you don't want to select the page immediately after click.
onPageClick(pageNumber) Function Optional Function to call when a page is clicked.
Page number is given as an optional parameter.
onInit Function Optional Function to call when the pagination is initialized.

Available methods

selectPage - Select a page based on page number.

$(function() {
    $(selector).pagination('selectPage', pageNumber);
});

prevPage - Selects the previous page.

$(function() {
    $(selector).pagination('prevPage');
});

nextPage - Select the next page.

$(function() {
    $(selector).pagination('nextPage');
});

Support & Feedback

For issues or suggestions please see simplePagination.js on Github, or tweet @flaviusmatis.

Thanks for your support!