Simple jQuery Pagination – 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=""></script>
<link href="" rel="stylesheet" type="text/css" />
<script src="" 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:

$(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);


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: Logo

You are commenting using your 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