JezK
Edit File: coupons.php
<?php include "header.php"; $count = $user->getTotalCoupons(); ?> <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> <section class="dark-bg"> <h1 class="text-white">Coupons</h1> </section> <section class="p-3 m-2" id="coupons"> <div class="container"> <span><a style="color:#00adef" href="https://detailingedition.com/home.php">« Back to Home</a></span> <div class="row my-3" id="appendData"> </div> </div> <div class="row row-cols-md-5" id="couponData"> </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 class="container"> <div class="row"> <div class="col-lg-6"> <div class="de-card"> <div class="coupon-card-body"> <div class="col-6 border-right"> <b>First Wash Offer</b> </div> <div class="col-6 d-flex flex-column"> <span class="text-right">Rs. 200%</span> <span class="text-right"> Valid until only 20 users</span> <span class="text-right de-red">9 left</span> </div> </div> </div> </div> <div class="col-lg-6"> <div class="de-card"> <div class="coupon-card-body"> <div class="col-6 border-right"> <b>First Wash Offer</b> </div> <div class="col-6 d-flex flex-column"> <span class="text-right">Rs. 200%</span> <span class="text-right"> Valid until only 20 users</span> <span class="text-right de-red">9 left</span> </div> </div> </div> </div> </div> </div> --> </section> <?php include "footer.php" ?> <script> let width = $(window).width(); let recordsPerPage; if (width < 768) { recordsPerPage = 4; // set 4 records per page for small screens } else { recordsPerPage = 8; // set 8 records per page for larger screens } $(document).ready(function() { $.ajax({ url: 'App/coupons.php', type: "POST", data: { limit: recordsPerPage, offset: 0 }, success: function(data) { data1 = JSON.parse(data); $('#appendData').html(data1.couponData); } }) $('#mp').click(function() { location.replace('myproducts.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; $.ajax({ url: 'App/coupons.php', type: "POST", data: { limit: recordsPerPage, offset: min }, success: function(data) { data1 = JSON.parse(data); $('#appendData').html(data1.couponData); $('#pgCount').val(data1.count); } }) }); </script>