Easy Client Side Pagination Plugin For jQuery - Paginate.js

Just another jQuery pagination plugin that automatically generate navigation links for your long list and page content. You can specify the number of rows to show per page and customize the styles of the pagination links in the CSS.

How to use it:

1. Create a pagination container for your long list and/or page content.

<div class="list-of-posts">
  <div class="post">
      <h3>Awesome Post 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius semper purus. Quisque dapibus mattis nulla, eu venenatis dolor scelerisque in. Vivamus maximus nulla ac.</p>
  </div>
  <div class="post">
      <h3>Awesome Post 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius semper purus. Quisque dapibus mattis nulla, eu venenatis dolor scelerisque in. Vivamus maximus nulla ac.</p>
  </div>
  <div class="post">
      <h3>Awesome Post 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius semper purus. Quisque dapibus mattis nulla, eu venenatis dolor scelerisque in. Vivamus maximus nulla ac.</p>
  </div>
  ...
</div>

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

2. Download and place the JavaScript file paginate.js script after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="paginate.js"></script>

3. Generate a basic pagination control in the webpage.

$('.pagination').pagination({
  itemsToPaginate: ".post",
  activeClass: 'active'
});

4. Apply your own CSS styles to the pagination links.

.pagination li {
  list-style-type: none;
  float: left;
  width: 40px;
  height: 40px;
  line-height:40px;
  border: 1px solid #FFF;
  background-color: cadetblue;
  color: #FFF;
  text-align: center;
  cursor: pointer;
  margin:0 5px;
}

.pagination li:hover {
  background-color: #fff;
  border: 1px solid #000;
  color: #000
}

.pagination ul {
  border: 0;
  padding: 0;
}

.active {
  background-color: #fff !important;
  border: 1px solid #000 !important;
  color: #000 !important;
}

5. Specify how many list items to show per page.

$('.pagination').pagination({
  itemsPerPage: 10 // default: 5
});

---

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