Skip to content


Subversion checkout URL

You can clone with
Download ZIP
jQuery pagination plugin
Latest commit ec56cdb @fedecarg Update .gitignore
Failed to load latest commit information.
src added example 4: paginate json data
.gitignore Update .gitignore Update

jQuery Pagination Plugin

To use this plugin you need to:

Include jquery.min.js and jquery.paginate.min.js in your document.

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

Include a small css to skin the navigation links.

<style type="text/css">
a.disabled {
    text-decoration: none;
    color: black;
    cursor: default;

Define an ID on the element you want to paginate, for example: "listitems".

<ul id="listitems">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>             

If you have a more than 10 child elements and you want to avoid displaying them before the javascript is executed, you can set the element as hidden by default:

<ul id="listitems" style="display:none">


Place a div in the place you want to display the navigation links.

<div id="listitems-pagination" style="display:none">
    <a id="listitems-previous" href="#" class="disabled">&laquo; Previous</a> 
    <a id="listitems-next" href="#">Next &raquo;</a> 

Include an initialization script at the bottom of your page like this:

<script type="text/javascript">
$(document).ready(function() {
    $('#listitems').paginate({itemsPerPage: 3});

To download a demo click here.

Something went wrong with that request. Please try again.