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
See Demo And Download
Official Website(cpbaumann): Click Here
This superior jQuery/javascript plugin is developed by cpbaumann. For extra advanced usage, please go to the official website.