Jquery Code for REST API Pagination

gistfile1.txt

<div id="pagin"></div>
<script>
jQuery(document).ready(function($) { 
//Pagination
pageSize = 10;
incremSlide = 10;
startPage = 0;
numberPage = 0;

var pageCount =  $(".jet-listing-grid__item").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
    
for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
   startPage-=5;
   incremSlide-=5;
   numberPage--;
   slide();
});

prev.hide();

var next = $("<li/>").addClass("next").html("Next").click(function(){
   startPage+=5;
   incremSlide+=5;
   numberPage++;
   slide();
});

$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens){
   $("#pagin li").hide();
   
   for(t=startPage;t<incremSlide;t++){
     $("#pagin li").eq(t+1).show();
   }
   if(startPage == 0){
     next.show();
     prev.hide();
   }else if(numberPage == totalSlidepPage ){
     next.hide();
     prev.show();
   }else{
     next.show();
     prev.show();
   }
   
    
}

showPage = function(page) {
	  $(".jet-listing-grid__item").hide();
	  $(".jet-listing-grid__item").each(function(n) {
	      if (n >= pageSize * (page - 1) && n < pageSize * page)
	          $(this).show();
	  });        
}
    
showPage(1);
$("#pagin li a").eq(0).addClass("current");

$("#pagin li a").click(function() {
	 $("#pagin li a").removeClass("current");
	 $(this).addClass("current");
	 showPage(parseInt($(this).text()));
});
});

</script>

<style>
li a 
{
    color: white;
}
.current {
  color: white;
}

#pagin li {
  display: inline-block;
  cursor: pointer;
    background: #8a3948;
    color: white!important;
    padding: 5px 25px 5px 25px;
}

.prev {
  cursor: pointer;
  cursor: pointer;
    background: #8a3948;
    color: white;
    padding: 5px 25px 5px 25px;
}

.next {
  cursor: pointer;
  cursor: pointer;
    background: #8a3948;
    color: white;
    padding: 5px 25px 5px 25px;
}

.last{
  cursor:pointer;
  margin-left:5px;
}

.first{
  cursor:pointer;
  margin-right:5px;
}
</style>

More Optimized code

<div id="pagin"></div>
<script>
 jQuery(document).ready(function($) { 

var pageSize = 12; // Number of items per page
    var pageCount = Math.ceil($("#fertility .jet-listing-grid__item").length / pageSize); // Calculate total pages

    for (var i = 1; i <= pageCount; i++) {
        $("#pagin").append('<a href="#" class="page-link">' + i + '</a> ');
    }

    // Show the first page
    $("#fertility .jet-listing-grid__item").hide();
    $("#fertility .jet-listing-grid__item").slice(0, pageSize).fadeIn();
    $("#pagin a:first").addClass("active");

    // Pagination click event
    $("#pagin a").on("click", function(e) {
        e.preventDefault();

        var page = $(this).text(); // Get the page number
        var start = (page - 1) * pageSize; // Calculate start index of items to show
        var end = start + pageSize; // Calculate end index of items to show

        // Hide all items and show only items for the selected page
        $("#fertility .jet-listing-grid__item").hide().slice(start, end).fadeIn(300);

        // Update active class for pagination links
        $("#pagin a").removeClass("active");
        $(this).addClass("active");
    });

});

</script>


<style>
.page-link
{
   background: #863f4f;
    margin: 0px;
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
    color: white;
}
.page-link:hover
{
    background: black;
    color: white;
}
.active
{
   background: black;
    margin: 0px;
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
    color: white;
}
</style>