How to Make a Working Pagination | Functional With UI Cards - Html, Css & Jquery | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to make a fully functional working pagination with examples like how the pagination work with UI cards, images, videos and other HTML elements, how to display number of items per a page and how to customize the pagination page elements using HTML, CSS and Jquery. Hope this video will be helpful.

Source Codes

HTML with One Card and The Pagination

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Fully Functional Pagination | Working With Example UI Cards - HTML, CSS & Jquery</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>

<div class="container">
      <div class="card-content" style="display: none">
        <div class="card">
          <div class="card-image"><img src="1.jpg" alt=""></div>
          <div class="card-info">
            <h3>Card 01</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
        <div class="pagination">
          
        </div>
      </div>
    </div>

</body>
</html>

Jquery for The Pagination

var sideWidth = maxLength < 9 ? 1 : 2;
  var leftWidth = (maxLength - sideWidth * 2 - 3) >> 1;
  var rightWidth = (maxLength - sideWidth * 2 - 3) >> 1;

if(totalPages <= maxLength){
    return range(1, totalPages);
  }

if(page <= maxLength - sideWidth - 1 - rightWidth){
    return range(1, maxLength - sideWidth - 1).concat(0, range(totalPages - sideWidth + 1, totalPages));
  }

if(page >= totalPages - sideWidth - 1 - rightWidth){
    return range(1, sideWidth).concat(0, range(totalPages- sideWidth - 1 - rightWidth - leftWidth, totalPages));
  }

return range(1, sideWidth).concat(0, range(page - leftWidth, page + rightWidth), 0, range(totalPages - sideWidth + 1, totalPages));
}

$(function(){
  var numberOfItems = $(".card-content .card").length;
  var limitPerPage = 3; //How many card items visible per a page
  var totalPages = Math.ceil(numberOfItems / limitPerPage);
  var paginationSize = 7; //How many page elements visible in the pagination
  var currentPage;

function showPage(whichPage){
    if(whichPage < 1 || whichPage > totalPages) return false;

currentPage = whichPage;

$(".card-content .card").hide().slice((currentPage - 1) * limitPerPage, currentPage * limitPerPage).show();

$(".pagination li").slice(1, -1).remove();

getPageList(totalPages, currentPage, paginationSize).forEach(item => {
      $("<li>").addClass("page-item").addClass(item ? "current-page" : "dots")
      .toggleClass("active", item === currentPage).append($("<a>").addClass("page-link")
      .attr({href: "javascript:void(0)"}).text(item || "...")).insertBefore(".next-page");
    });

$(".previous-page").toggleClass("disable", currentPage === 1);
    $(".next-page").toggleClass("disable", currentPage === totalPages);
    return true;
  }

$(".pagination").append(
    $("<li>").addClass("page-item").addClass("previous-page").append($("<a>").addClass("page-link").attr({href: "javascript:void(0)"}).text("Prev")),
    $("<li>").addClass("page-item").addClass("next-page").append($("<a>").addClass("page-link").attr({href: "javascript:void(0)"}).text("Next"))
  );

$(".card-content").show();
  showPage(1);

$(document).on("click", ".pagination li.current-page:not(.active)", function(){
    return showPage(+$(this).text());
  });

$(".next-page").on("click", function(){
    return showPage(currentPage + 1);
  });

$(".previous-page").on("click", function(){
    return showPage(currentPage - 1);
  });
});
</script>

CSS for The Cards and The Pagination

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px;
}

.card{
  position: relative;
  background: #fff;
  max-width: 325px;
  width: 325px;
  height: auto;
  margin: 25px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
  border-radius: 10px;
  overflow: hidden;
}

.card-image{
  max-height: 200px;
}

.card-image img{
  max-width: 100%;
  height: auto;
}

.card-info{
  position: relative;
  color: #222;
  padding: 10px 20px 20px;
}

.card-info h3{
  font-size: 1.8em;
  font-weight: 800;
  margin-bottom: 5px;
}

.card-info p{
  font-size: 1em;
  margin-bottom: 5px;
}

.pagination{
  text-align: center;
  margin: 30px 30px 60px;
  user-select: none;
}

.pagination li{
  display: inline-block;
  margin: 5px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 10%);
}

.pagination li a{
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 45px;
}

.previous-page, .next-page{
  background: #0AB1CE;
  width: 80px;
  border-radius: 45px;
  cursor: pointer;
  transition: 0.3s ease;
}

.previous-page:hover{
  transform: translateX(-5px);
}

.next-page:hover{
  transform: translateX(5px);
}

.current-page, .dots{
  background: #ccc;
  width: 45px;
  border-radius: 50%;
  cursor: pointer;
}

.active{
  background: #0AB1CE;
}

.disable{
  background: #ccc;
}

Download Image Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

UnknownNovember 24, 2021 at 12:05 AM
Usuue9
AnonymousJanuary 5, 2023 at 5:48 AM
i used the above code to my project however the problem i am facing that it can show any number of items that i give but when it comes to the buttons it only shows the prev button and not the other button ' next ' and also it doesn't show the pagination numbers

Wednesday, June 30, 2021

How to Make a Working Pagination | Functional With UI Cards - Html, Css & Jquery

Description

Source Codes

HTML with One Card and The Pagination

Jquery for The Pagination

CSS for The Cards and The Pagination

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, June 30, 2021

How to Make a Working Pagination | Functional With UI Cards - Html, Css & Jquery

Description

Source Codes

HTML with One Card and The Pagination

Jquery for The Pagination

CSS for The Cards and The Pagination

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form