Easy Paginate – jQuery plugin for pagination

Interactive Online > Blog  > Web Design  > Easy Paginate – jQuery plugin for pagination

Easy Paginate – jQuery plugin for pagination

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.

View simple demo
View styled demo or
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">

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>

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>


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:


Here’s the full list of available options:


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


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.


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


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


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.


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! 😉

Copyright: Css Globe

(read full article on source site)
Free Website for Your Dental Practice
See why our dental practice websites exceed the features & value of your typcial dentist website.
  • No cookie-cutter websites
  • No duplicate content
  • Custom built with a unique look and feel
  • Unique content written by professional writers
  • Set yourself apart from other dentists
  • The key to your online success!
* we never share your e-mail with third parties.