Small Scrolling List Pagination Plugin For jQuery - IDPaginate

File Size: 7.58 KB
Views Total: 1384
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Small Scrolling List Pagination Plugin For jQuery - IDPaginate

IDPaginate is a lightweight jQuery plugin used to paginate long html list that allows to navigate between pages by scrolling the items just like a scroller.

How to use it:

1. Assuming you have a long html list like this:

<ul id="demo">
  <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>

2. Create an empty container to place the pagination controls.

<div class="idpaginate"></div>

3. Place jQuery library and the jQuery IDPaginate plugin's script into the webpage.

<script src="//"></script>
<script src="js/jquery.idpaginate.min.js"></script>

4. Call the function on the html list to generate a pagination inside the DIV container you just created.


5. Add your own CSS styles to the pagination controls. Or include the style sheet idpaginate.css in the header of the webpage.

.idpaginate { padding-bottom: 20px; }

.idpaginate a { margin-right: 5px; }

.idpaginate .idpaginate-next-disabled, .idpaginate .idpaginate-prev-disabled {
  color: #999;
  background: #fff;
  cursor: default;

.idpaginate .idpaginate-page-current {
  background: #e20000;
  color: #F5FFAF;

This awesome jQuery plugin is developed by indranil. For more Advanced Usages, please check the demo page or visit the official website.