/jquery.pagination-with-hash-change

a jquery plugin: Reload save Pagination with #hashes

Primary LanguageJavaScript

Pagination with hash change jQuery Plugin

Adds Pagination with hash change

Usage

HTML

<div id="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.js"></script>
<script>
  $(document).ready(function() {
    $('#gallery').paginationwithhashchange({
      pagingId: '#paging-nav',
      itemsPerPage: 5
    });
  });
</script>

HTML/CSS

The generated HTML source in <div id="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.