Simple jQuery Pagination – Pager

pager

I was looking for a simple javascript/jquery pagination plugin but all seemed so complex with functionalities I did not need that I decided to create a really simple one. All that this pagination does is: give items to be paginated the same class name and give it a maximum number of items to be displayed per pagination page while also a maximum number of pagination icons. Here I placed a pagination at the top and at the bottom of my items so no IDs where used but instead class names have been used everywhere.

View Live Demo Here

Step 1:-

In your head section add the following references (jquery and pagination js/css) or download directly on your local:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://twiggle-web-design.com/tutorials/pagination/style.css" rel="stylesheet" type="text/css" />
<script src="http://twiggle-web-design.com/tutorials/pagination/pagination.min.js" type="text/javascript"></script>

Step 2:-

Add the following divider wherever you would like the pagination to appear, its important to use the class name “pagination”:


<div class="pagination"></div>

Step 3:-

Either in your head section of at the bottom of your body section, add the following javascript code:


<script>
$(document).ready( function () {

//initPagination(element, maxItems, maxPages);
//element: the class name given to the elements which will need to be paginated
//maxItems: the maximum number of items to display per page
//element: the maximum number of navigation numbers in the pagination nav bar
initPagination("item", 10, 5);

});
</script>

Goodluck 🙂

PS: drop me a comment if you have any questions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s