PHP/Bootstrap - Cards with Filter & Pagination option - ASK : Showing more records per page

I am building a webpage on

Stack : PHP 7, HTML, Javascript, Bootstrap

Problem faced:

The page uses bootstrap and has various cards. I have written a logic for pagination and expectation that each page will at max have 10 cards. Now , when I run this code, it shows only 2 cards / page

I want to show 10 cards / page. Can you help me suggest how I can show 10 cards per page such that the pagination doesnt break

Expected output

Each page should show 10 cards/page. On the next page similarly 10 cards and so on. Pagination should work properly

<script>
    // Returns an array of maxLength (or less) page numbers
    // where a 0 in the returned array denotes a gap in the series.
    // Parameters:
    //   totalPages:     total number of pages
    //   page:           current page
    //   maxLength:      maximum size of returned array
    function getPageList(totalPages, page, maxLength) {
        if (maxLength < 5) throw "maxLength must be at least 5";

        function range(start, end) {
            return Array.from(Array(end - start + 1), (_, i) => i + start);
        }

        var sideWidth = maxLength < 9 ? 1 : 2;
        var leftWidth = (maxLength - sideWidth * 2 - 3) >> 1;
        var rightWidth = (maxLength - sideWidth * 2 - 2) >> 1;
        if (totalPages <= maxLength) {
            // no breaks in list
            return range(1, totalPages);
        }
        if (page <= maxLength - sideWidth - 1 - rightWidth) {
            // no break on left of page
            return range(1, maxLength - sideWidth - 1)
                .concat([0])
                .concat(range(totalPages - sideWidth + 1, totalPages));
        }
        if (page >= totalPages - sideWidth - 1 - rightWidth) {
            // no break on right of page
            return range(1, sideWidth)
                .concat([0])
                .concat(
                    range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages)
                );
        }
        // Breaks on both sides
        return range(1, sideWidth)
            .concat([0])
            .concat(range(page - leftWidth, page + rightWidth))
            .concat([0])
            .concat(range(totalPages - sideWidth + 1, totalPages));
    }

    $(function() {
        // Number of items and limits the number of items per page
        var numberOfItems = $("#jar .content").length;
        var limitPerPage = 2;
        // Total pages rounded upwards
        var totalPages = Math.ceil(numberOfItems / limitPerPage);
        // Number of buttons at the top, not counting prev/next,
        // but including the dotted buttons.
        // Must be at least 5:
        var paginationSize = 7;
        var currentPage;

        function showPage(whichPage) {
            if (whichPage < 1 || whichPage > totalPages) return false;
            currentPage = whichPage;
            $("#jar .content")
                .hide()
                .slice((currentPage - 1) * limitPerPage, currentPage * limitPerPage)
                .show();
            // Replace the navigation items (not prev/next):
            $(".pagination li").slice(1, -1).remove();
            getPageList(totalPages, currentPage, paginationSize).forEach(item => {
                $("<li>")
                    .addClass(
                        "page-item " +
                        (item ? "current-page " : "") +
                        (item === currentPage ? "active " : "")
                    )
                    .append(
                        $("<a>")
                        .addClass("page-link")
                        .attr({
                            href: "javascript:void(0)"
                        })
                        .text(item || "...")
                    )
                    .insertBefore("#next-page");
            });
            return true;
        }

        // Include the prev/next buttons:
        $(".pagination").append(
            $("<li>").addClass("page-item").attr({
                id: "previous-page"
            }).append(
                $("<a>")
                .addClass("page-link")
                .attr({
                    href: "javascript:void(0)"
                })
                .text("Prev")
            ),
            $("<li>").addClass("page-item").attr({
                id: "next-page"
            }).append(
                $("<a>")
                .addClass("page-link")
                .attr({
                    href: "javascript:void(0)"
                })
                .text("Next")
            )
        );
        // Show the page links
        $("#jar").show();
        showPage(1);

        // Use event delegation, as these items are recreated later
        $(
            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);
        });
        $(".pagination").on("click", function() {
            $("html,body").animate({
                scrollTop: 0
            }, 0);
        });
    });
</script>
<script type="text/javascript">
    $(".filter").on("keyup", function() {
        var input = $(this).val().toUpperCase();
        var visibleCards = 0;
        var hiddenCards = 0;

        $(".container").append($("<div class='card-group card-group-filter'></div>"));


        $(".card").each(function() {
            if ($(this).data("string").toUpperCase().indexOf(input) < 0) {

                $(".card-group.card-group-filter:first-of-type").append($(this));
                $(this).hide();
                hiddenCards++;

            } else {

                $(".card-group.card-group-filter:last-of-type").prepend($(this));
                $(this).show();
                visibleCards++;

                if (((visibleCards % 2) == 0)) {
                    $(".container").append($("<div class='card-group card-group-filter'></div>"));
                }
            }
        });

        $(".card-group").each(function() {
            if ($(this).find("div").length == 0) {
                $(this).remove();
            }
        })
    });
</script>

<style>
    .card {
        padding: 20px;
        margin: 20px;
    }

    .filter {
        margin-left: 20px;
        margin-right: 20px;

        display: block;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
$videoId = 'hTg4cvT6gbg';
$apikey = 'xxxxx';
$googleApiUrl = 'https://www.googleapis.com/youtube/v3/videos?id=' . $videoId . '&key=' . $apikey . '&part=snippet';

$ch = curl_init();

curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $googleApiUrl);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_VERBOSE, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($ch);

curl_close($ch);

$data = json_decode($response);

$value = json_decode(json_encode($data), true);

$title = $value['items'][0]['snippet']['title'];
$description = $value['items'][0]['snippet']['description'];


?>

<div class="col-lg-12">
<div class="d-flex justify-content-between mb-3"> <span></span> <button class="btn btn-primary add">Add Video</button> </div>

    <div class="search-bar">
        <form class="search-form d-flex align-items-center" method="POST" action="#">
            <input type="text" name="query" width="50%" placeholder="Search" class="filter form-control" class="filter" placeholder="filter" value="">
            <button type="submit" class="btn btn-light rounded-pill" title="Search">
                <i class="bi bi-search"></i>
            </button>
        </form>
    </div>

</div>


<div class="container" id="jar">

    <div class="card-group">
        <div class="card col-lg-5 text-center content content" data-string="DAS">
            <div class="card-header text_center">
                <img src="https://img.youtube.com/vi/hTg4cvT6gbg/mqdefault.jpg" width="80%">
                <hr>
                <h7><?php echo $title; ?></h7>
            </div>
        </div>
        <div class="card col-lg-5 text-center content" data-string="DJANGO">
            <div class="card-header text_center">
                <img src="https://www.brandloom.com/wp-content/uploads/2021/04/Top-10-Best-Payment-Gateways-in-India-for-eCommerce-Businesses.jpg" width="80%">
                <hr>
                <h7><?php echo $title; ?></h7>
            </div>
        </div>
    </div>

    <div class="card-group">
        <div class="card col-lg-5 text-center content content" data-string="<?php echo substr($description, 0, 100); ?>">
            <div class="card-header text_center">
                <img src="https://img.youtube.com/vi/hTg4cvT6gbg/mqdefault.jpg" width="80%">
                <hr>
                <h7><?php echo $title; ?></h7>
            </div>
        </div>
        <div class="card col-lg-5 text-center content" data-string="<?php echo substr($description, 0, 100); ?>">
            <div class="card-header text_center">
                <img src="https://img.youtube.com/vi/hTg4cvT6gbg/mqdefault.jpg" width="80%">
                <hr>
                <h7><?php echo $title; ?>
            <br> <span class="badge bg-danger">10-18</span>
        </h7>
            </div>
        </div>
    </div>

    <div class="card-group">
        <div class="card col-lg-5 text-center content content" data-string="<?php echo substr($description, 0, 100); ?>">
            <div class="card-header text_center">
                <img src="https://img.youtube.com/vi/hTg4cvT6gbg/mqdefault.jpg" width="80%">
                <hr>
                <h7><?php echo $title; ?></h7>
            </div>
        </div>
        <div class="card col-lg-5 text-center content" data-string="<?php echo substr($description, 0, 100); ?>">
            <div class="card-header text_center">
                <img src="https://img.youtube.com/vi/hTg4cvT6gbg/mqdefault.jpg" width="80%">
                <hr>
                <h7><?php echo $title; ?></h7>
            </div>
        </div>
    </div>

</div>
</br>
</br>
<nav>
    <ul class="pagination justify-content-center pagination-sm">
    </ul>
</nav>

PHP/Bootstrap - Cards with Filter & Pagination option - ASK : Showing more records per page

0 Answers