Jquery Code for REST API Pagination

gistfile1.txt

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

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>