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.


  • 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">

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.


// 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>.

  <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>

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.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…


Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…