JQuery Pagination

In this article, we learn how to add pagination in jQuery. At the beginning of this article, we will understand the basic meaning of jQuery, paginations. After this, we will create paginations with the help of various examples in jQuery.

What do you mean by jQuery?

JQuery is a fast, lightweight, small, and feature-rich JavaScript library.

To include the jQuery library in the HTML page we can use <script> tag. Below library is used to include jQuery in the HTML page.

<script src ="https://code.jquery.com/jquery-3.5.1.min.js">

</script>

What do you mean by Pagination?

It is also known as paging. In this, we can divide a web page into discrete parts. In other words, we can say that pagination is a method that provides users with additional navigation options for browsing through single parts of the given article. Details of the report are usually referred to by numbers, arrows, and "previous" and "next"-buttons.

In this article, we will create pagination with the help of jQuery.

Let's take some examples of how to create pagination in JQuery.

Example 1: How to create pagination in JQuery.

<html>
<head>
<title>
jQuery pagination
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#data tr {
  display: none;
}
.page {
margin-top: 50px;
}
table, th, td {
  border: 1px solid black;
}
#data {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#data td, #data th {
  border: 1px solid #ddd;
  padding: 8px;
}
#data tr:nth-child(even){ background-color: #f2f2f2; }

#data tr:hover {
background-color: #ddd;
}
#data th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
h2 {
color: #4CAF50;
}
#nav a {
color: #4CAF50;
font-size: 20px;
margin-top: 22px;
font-weight: 600;
}
a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready (function () {
    $('#data').after ('<div id="nav"></div>');
    var rowsShown = 5;
    var rowsTotal = $('#data tbody tr').length;
    var numPages = rowsTotal/rowsShown;
    for (i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#nav').append ('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
    }
    $('#data tbody tr').hide();
    $('#data tbody tr').slice (0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function() {
    $('#nav a').removeClass('active');
   $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    });
});
</script>
</head>
<body>
<div class ="page" align="center">
<h2> <b> Example:  JQuery Pagination </b> </h2>
<table id="data" align="center">
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbk?p</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td> Centro Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>K?niglich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>                                                                                                                                                                                                                                                                                                                                                                                                                                                              
    <td>UK</td>
  </tr>
  <tr>
    <td> Paris specialties</td>
    <td> Marie Bertrand</td>
    <td> France</td>
  </tr>
</table>
 </div>
</body>
</html>

Output:

The output of this example are given below.

Example 2: How to create pagination in JQuery.

<html>
<head>
<title>
JQuery Pagination
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.wrapper {
  margin: 30px auto;
  text-align: center;
}
h1 {
  margin-bottom: 1em;
 color: #007bff;
}
#pagination-demo {
  display: inline-block;
  margin-bottom: 1em;
  margin-top: 1em;
}
#pagination-demo li {
  display: inline-block;
}
#data td, #data th {
  border: 1px solid #ddd;
  padding: 6px;
}
#data tr:hover { 
background-color: #ddd;
}
.page-content {
  background: #eee;
  display: inline-block;
  padding: 10px;
  width: 100%;
  max-width: 660px;
}
#data th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #007bff;
  color: white;
}
table, th, td {
  border: 1px solid black;
}
#page-content {
color: white;
 background-color: #007bff;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"> </script>
<script>
$(function () {
$("#pagination-demo").twbsPagination({
  totalPages: 16,
  visiblePages: 2,
  next: "Next",
  prev: "Prev",
  onPageClick: function (event, page) {
    //fetch content and render here
    $("#page-content").text ("Page? + page) + ?content here";
  }
});
});
</script>
<body>
<div class="wrapper">
  <div class="container">
  <div class="row">
  <div class="col-sm-12">
  <h1> jQuery Pagination </h1>
 <table id="data" align="center">
 <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td> Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbk?p</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>K?niglich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri </td>
    <td>Canada</td>
  </tr>
  <tr>
    <td> Magazzini Alimentari </td>
    <td> Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialties</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  
</table>
        <ul id="pagination-demo" class="pagination-sm">
</ul>
      </div>
    </div>
 <div id="page-content" class="page-content"> Page 1</div>
  </div>
</div>
</body>
</html>

Output:

The output of this example are given below.

Example 3: How to create pagination in JQuery.

<html>
<head>
<title>
jquery pagination
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.header-pen {
  text-align: center;
  margin-top: 10px;
}
.header-pen a {
  font-size: 35px;
  color: #fff;
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}
.footer-pen {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 10px 0px;
  background: #fff;
  text-align: center;
  font-size: 18px;
  color: #333;
}
.footer-pen a {
  color: #000000;
}
h1 {
  margin-top: 1em;
 color: #000000;
}
body {
  margin: 0;
  background: #e95b4d;
}

.container {
  position: absolute;
  left: 50%;
  margin-top: 20px;
  transform: translate(-50%, 0%);
}

.fltr {
  filter: url("#gooey");
  -webkit-filter: url("#gooey");
  -moz-filter: url("#gooey");
  margin-top: 50px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
}

.page-list {
  margin: 0;
  border-radius: 30px;
  display: inline-block;
  padding: 0px 0px;
  position: relative;
  z-index: 2;
}
.page-list li {
  background: #fff;
  border-radius: 50%;
  margin: 0px 15px;
  counter-increment: list;
  cursor: pointer;
  position: relative;
  z-index: 2;
  width: 41px;
  height: 41px;
  line-height: 41px;
  display: inline-block;
  text-align: center;
  color: #111;
  font-family: sans-serif;
  font-size: 20px;
}
.page-list li:after {
  content: "";
  content: counter(list);
}

.from-move {
  content: "";
  position: absolute;
  left: 7px;
  top: -7px;
  border-radius: 50%;
  z-index: 1;
  width: 55px;
  height: 55px;
  display: inline-block;
  transition: all 0.5s ease;
  background: #ffffff;
}
#data td, #data th {
  border: 1px solid #ddd;
  padding: 8px;
}
#data tr:hover {background-color: #ddd;}
.svg-flt {
  position: absolute;
}

.from-move.animate {
  animation: page-move 0.5s ease 0s forwards;
}
@keyframes page-move {
  0% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(1, 0.5);
  }
  40% {
    transform: scale(1, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

li.animate-right {
  animation: li-move-right 0.7s ease 0s forwards;
}
@keyframes li-move-right {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(20px);
  }
  40% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(5px);
  }
  80% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}
li.animate-left {
  animation: li-move-left 0.7s ease 0s forwards;
}
@keyframes li-move-left {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(-20px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<script>
$(function () {
$(".page-list li").click(function () {
  var delay = 0.05,
    init = 1;
  var li_ind = $(this).index();
  var li_ind_prev = $(".active").index();
  var li_length = $(this).length;
  var li_diff = li_ind - $(".active").index();
  var dur = Math.abs(li_diff);
  var left_pos = $(this).position().left + 7;
  $("#from-move").css({ left: left_pos });

  if (li_diff > 0) {
    for (i = li_ind_prev; i < li_ind; i++) {
      dur = delay * init;
      $("#page-list")
        .find("li")
        .eq(i)
        .addClass("animate-right")
        .css({ "animation-delay": dur + "s" });
      init = init + 1;
    }
  } else {
    for (i = li_ind_prev; i > li_ind; i--) {
      dur = delay * init;
      $("#page-list")
        .find("li")
        .eq(i)
        .addClass("animate-left")
        .css({ "animation-delay": dur + "s" });
      init = init + 1;
    }
  }
  $("#from-move").addClass("animate");

  $("#page-list li").removeClass("active");
  $(this).addClass("active");

  $("#from-move").bind(
    "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    function () {
      $("#from-move").removeClass("animate");
      $("#from-move").unbind(
        "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend"
      );
    }
  );
  $(".page-list li").bind(
    "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
    function () {
      $(".page-list li").removeClass("animate-right").removeAttr("style");
      $(".page-list li").removeClass("animate-left").removeAttr("style");
      $("#page-list li").unbind(
        "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd"
      );
    }
  );
});
});
</script>
<body>
<div class="header-pen">
  <h1> Jquery Pagination Example </h1>
</div>
<table id="data" align="center">

  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbk?p</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>K?niglich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris sp?cialit?s</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
  
</table>
  
<div class="fltr">
  <span class="from-move" id="from-move"></span>
  <ul class="page-list" id="page-list">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-flt">
  <defs>
    <filter id="gooey">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
    </filter>
  </defs>
</svg>
</body>
</html>

Output:

The output of this example are given below.