Skip to content
jQuery pagination plugin
Branch: master
Clone or download
Pull request Compare This branch is even with fedecarg:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
README.md

README.md

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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></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;
}
</style>

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>             
</ul>

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

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> 
</div>

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

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

To download a demo click here.

You can’t perform that action at this time.