Today I am presenting a simple jQuery plugin I made. This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It’s main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.

Simple demo
Styled demo
Auto pagination
Download the plugin

How does it work?

The plugin takes a list of items, calculates a number of child elements of a certain object, divides it by step parameter (which can be easily adjusted) and generates "control buttons". Controls are inserted immediately after the selected object in a form of ordered list.

For target object I recommend using unordered list, although plugin will work with any other type of element that contains any type of child elements. If you want to have it set up that way, child elements can be of a different type!

To apply this plugin you will of course need to link to jQuery library and the plugin js file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/easypaginate.js"></script>

You will need to initiate the plugin:

<script type="text/javascript">
  
  jQuery(function($){ 
  $('ul#items').easyPaginate();
  }); 
  
</script>

This is the source code for the target object I am using in my example:

<ul id="items">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>Page 5</li>
  <li>Page 6</li>
  <li>Page 7</li>
  <li>Page 8</li>
  <li>Page 9</li>
  <li>Page 10</li>
  <li>Page 11</li>
  <li>Page 12</li>
  <li>Page 13</li>
  <li>Page 14</li>
</ul>

This is the generated source code for control buttons (inserted immediately after the target element):

<ol id="pagination">
  <li class="prev">Previous</li>
  <li class="current" data-index="1">1</li>
  <li data-index="2">2</li>
  <li data-index="3">3</li>
  <li data-index="4">4</li>
  <li class="next">Next</li>
</ol>

Options

There are several options you can modify. First and most important is the step parameter. Step parameter defines how many child items will be visible at a time. It is also used in calculating of number of pages. By default this parameter is set to 4. To use your own step value, change the step parameter:

jQuery(function($){
  
  $('ul#items').easyPaginate({
  step:3
  });
  
}); 

Here’s the full list of available options:

step

Default value: 4
Defines a number of items visible on each "page".

delay

Default value: 100
Items on each "page" fade in one by one. This parameter controls the pause between each item’s appearance so we can create "wave" effect. It is defined in milliseconds.

numeric

Default value: true
Boolean. If set to true then the numeric pagination buttons will show.

nextprev

Default value: true
Boolean. If set to true then the next and previous pagination buttons will show.

auto

Default value: false
Boolean. If set to true then the plugin will automatically rotate the "pages"

pause

Default value: 4000
If set to auto pagination, this parameter controls the length of the pause in milliseconds between each "page turn".

clickstop

Default value: true
If set to auto pagination, this parameter controls whether the pages will continue to automatically rotate. If you want to continue the rotation set this parameter to false.

controls

Default value: ‘pagination’
As mentioned, the plugin generates an ordered list for the purpose of navigating through "pages". This parameter defines the list’s ID.

current

Default value: ‘current’
This parameter defines a class name of a current "page" in the numeric navigation. It is used for styling purposes.

If you want to create multiple paginations on the same page, have in mind that this plugin uses IDs to target control buttons so you need to define control id parameter for each pagination.

Enjoy! 😉

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (13 Comments)

1. Panda
   March 10, 2011

   add auto play options?

2. cssglobe
   March 11, 2011

   Sure, why not! :) I added it.

3. Husien Adel
   March 11, 2011

   thanks for great plugin and it's very awesome :D, need a clear for parameter that i want that pagination for images in li to be working continuous ? i see it now working for some time than fade out ?

4. ox69xo
   March 12, 2011

   great!

5. Mary
   March 14, 2011

   Hey, Great Plugin. I noticed it doesn't loop after the auto continuous. I made a small update to the code, probably better way of doing this but seems to work. In easypaginate.js, after line 55, I added: if(upper >= count) { page = 0; } Hope it helps.

6. VNM
   March 16, 2011

   Thanks for this really useful article.

7. Natasha
   March 17, 2011

   Great article...But I have just one question how can I remember scroll position after refresh or after clicking on some link? I'm just a biginner any example would be hopefull. And sorry my eniglish is bad I am from Russia :)

8. Name
   March 17, 2011

   What if we have an php enabled page with recordets and stuff? Will something change or we just need to put inside the li tags the dynamic urls?

9. Mould Maker
   March 18, 2011

   Great plugin. But If there is a text button in right bottom areat for nagivation ?

10. Michel Fortin
    March 19, 2011

    Alen, Not sure if you can help me. My client is looking for a lightbox popup paginated jquery slider. Much like a slideshow like easyslider, but in a lightbox popup. For example, if you go to http://sproutsocial.com/ and click on their "tour" at the top, that's what I mean. I know I could code this myself, but I'm a designer, not a coder. If there was something already made in the form of a plugin that would be great. Any ideas or recommendations? Thanks.

11. Wissam
    March 20, 2011

    am experiencing the same issue with mary, the plugin doesnt do a loop after load

12. cam filmi
    March 23, 2011

    thanx for this great plugin

13. Vladislavs Judins
    April 8, 2011

    am experiencing the same issue with mary, the plugin doesnt do a loop after load +1

Sorry, the comment form is closed at this time.