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>

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