cpbaumann/jquery.pagination2-with-hash-change

jquery plugin: Pagination with #hashes, next Button, prev Button, Display Page

Pagination Version 2 with hash change jQuery Plugin

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

Usage

HTML

<button class="prev">prev</button>
<button class="next">next</button>
<span>Page: <span class="counter"> </span></span>
<div class="paging-nav"></div>
<ul id="gallery" class="clearfix">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>

  <li>30</li>
</ul> 

jQuery

Use the plugin as follows:

<script src="js/libs/jquery-1.9.0.min.js"></script>
<script src="js/jquery.pagination-with-hash-change-2.js"></script>
<script>
    $(document).ready(function() {
      $('#gallery').Paginationwithhashchange2({
        nextSelector: '.next',
        prevSelector: '.prev',
        counterSelector: '.counter',
        pagingSelector: '.paging-nav',
        itemsPerPage: 4,
        initialPage: 3
      });
    });
</script>

HTML/CSS

The generated HTML source 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="#3">3</a></li>
  <li><a href="#4">4</a></li>
  <li><a href="#5">5</a></li>

	<li><a href="#30">30</a></li>
</ul>

Notes

• Requires jQuery 1.9+.

• hashes of a link are used

• tested in IEE 8, IE 9, 10, 11 Safarie, Firefox, Chrome

License

This plugin is dual licensed under the MIT and GPL licenses.