jQuery Based List Pagination with Hash Tracking

A small jQuery plugin which provides a simple way to generate a pagination from an html list, with support for hash change, next/prev buttons and total/current number of page(s). This plugin is dual licensed under the MIT and GPL licenses.

How to use it:

1. Load jQuery library and the jQuery pagination 2 plugin at the end of your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.pagination-with-hash-change-2.js"></script>

2. Create a regular Html list.

<ul id="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  ...
  <li>100</li>
</ul>

3. The html for the pagination with next/prev buttons.

<button class="prev">prev</button>
<button class="next">next</button>
<span>Page: <span class="counter"> </span></span>
<div class="paging-nav"></div>

4. Initialize the plugin.

$('#demo').Paginationwithhashchange2({    

// default settings
nextSelector: '.next',
prevSelector: '.prev',
counterSelector: '.counter',
pagingSelector: '.paging-nav',
itemsPerPage: 5,
initialPage: 1

});

5. The plugin will generate a list based pagination in the <div class="paging-nav"></div>.

<ul>
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
  <li><a href="#4">4</a></li>
  <li><a href="#5">5</a></li>
  ...
  <li><a href="#100">100</a></li>
</ul>

6. Add custom CSS styles to the pagination.

#demo {
  list-style: none;
  margin: 0 0 2em 0;
  padding: 0;
}

#demo li {
  float: left;
  margin: 5px 5px 0 0;
  width: 75px;
  height: 75px;
  background-color: #DDD;
  text-align: center;
  line-height: 75px;
  color: black;
  font-size: 22px;
}

.paging-nav ol,
.paging-nav ul {
  overflow: hidden;
  list-style: none;
  margin: 2em 0 1em 0;
  padding: 0;
}

.paging-nav li {
  float: left;
  cursor: pointer;
  margin: 0 .5em 0 0;
}

.paging-nav a {
  display: block;
  cursor: pointer;
  height: 1.4em;
  width: 1.4em;
  border: 1px #ccc solid;
  line-height: 1.4em;
  text-align: center;
  color: #111;
  text-decoration: none;
}

.paging-nav .active a {
  border-color: red;
  color: #f00;
}

---

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