jQuery Based List Pagination with Hash Tracking
File Size: | 40.1 KB |
---|---|
Views Total: | 5399 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.