JezK
Edit File: mycareclubs.php
<?php include "header.php"; $id = $_SESSION['id']; $numbers = intval(preg_replace('/[^0-9]/', '', $id)); $myCareClubDetails = $user->getMyPackages(['id' => $id, 'limit' => 10, 'offset' => 0]); $count = count($myCareClubDetails); ?> <style> /*Generic*/ .wrapper { margin: 60px auto; text-align: center; } /*Specific styling*/ #content { padding: 15px; border: solid 1px #eee; max-width: 660px; margin: auto; border-radius: 4px; } </style> <input type="hidden" id="id1" value="<?php echo $numbers; ?>"> <section class="dark-bg"> <h1 class="text-white">My Ceramic Club</h1> </section> <section class="py-4"> <div class="container"> <span><a style="color:#00adef" href="<?php echo $baseUrl ?>home.php">« Back to Home</a></span> <h2 class="text-center mb-4">Simple and transparent pricing</h2> <p class="text-center ">We apply a state-of-the-art ceramic coating that chemically bonds to your vehicle’s paint, forming a crystal-clear, ultra-durable shield that enhances gloss, resists damage, and preserves perfection.</p> </div> </section> <section class="py-4 d-flex justify-content-center"> <div class="tabs-button"> <div class="d-flex"> <div class="tab-btn" id="p1">Ceramic Club</div> <div class="tab-btn active">My Ceramic Club</div> </div> </div> </section id="packages"> <div class="container"> <div class="container"> <div class="row my-3" id="appendData"> </div> </div> <div class="row row-cols-md-5" id="mypackageData"> </div> <div class="wrapper"> <div class="container"> <p id="pagination-here"></p> </div> </div> <input type="hidden" name="pgCount" id="pgCount" value="<?php echo $count; ?>"> <input type="hidden" name="pgNum" id="pgNum"> <div id="appendMyCareClubHtml"> </div> </div> <?php include "footer.php" ?> <script> let width = $(window).width(); let recordsPerPage; if (width < 768) { recordsPerPage = 3; // set 3 records per page for small screens } else { recordsPerPage = 4; // set 4 records per page for larger screens } $(document).ready(function() { let id = $('#id1').val(); $.ajax({ url: 'App/mycareclubs.php', type: "POST", data: { limit: recordsPerPage, offset: 0, id: id }, success: function(response) { data = JSON.parse(response); $('#appendData').html(data.mypackageData); } }) $('#p1').click(function() { location.replace('careclub.php'); }) }); let pgCount = $('#pgCount').val(); let page_count = Math.ceil(pgCount / recordsPerPage); $('#pagination-here').bootpag({ total: page_count, page: 1, maxVisible: page_count, leaps: true, wrapClass: 'pagination', activeClass: 'active', disabledClass: 'disabled', }) //page click action $('#pagination-here').on("page", function(event, num) { $('#pgNum').val(num); var min = num * recordsPerPage - recordsPerPage; let id = $('#id1').val(); $.ajax({ url: 'App/mycareclubs.php', type: "POST", data: { limit: recordsPerPage, offset: min, id: id }, success: function(data) { data1 = JSON.parse(data); $('#appendData').html(data1.mypackageData); $('#pgCount').val(data1.count); } }) }); </script>