jQuery Plugin Pagination with Hashes, Next Prev Button, Display Page

Pagination v2 with jQuery Plugin to change hash which provides a simple way to generate pagination from an HTML menu, with support for changing hash, next/prev buttons, and current total/count of the pages.

Features:

Adds Pagination with hash change
Next and Prev Button
Display a Pagenumber

How to make use of it:

1. Load the jQuery library and jQuery pagination plugin 2.

<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 normal HTML list.

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

3. HTML for pagination with Next/Previous 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 create list-based pagination in <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 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;
}

List Pagination with Hash Tracking, Pagination Version 2 with hash change jQuery Plugin/Github