JezK

Edit File: myproducts.php

<?php
include "header.php";
$id = intval($_SESSION['id']);
$count = $user->getTotalMyProducts($id);

?>
<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 $id; ?>">
<section class="dark-bg">
    <h1 class="text-white">My Products</h1>
</section>
<section class="py-4">
    <div class="container">
    <span><a style="color:#00adef" href="<?php echo getenv('BASE_URL'); ?>home.php">« Back to Home</a></span>
        <h2 class="text-center mb-4">Simple and transparent pricing</h2>
        <p class="text-center">Straight to the point pricing plans. No surprises or hidden charges. All is clear.</p>
    </div>
</section>
<section class="py-4 d-flex justify-content-around">
    <div class="col-lg-2 col-md-1"></div>
    <div class="tabs-button">
        <div class="d-flex">

<div class="tab-btn" id="p1">Products</div>
            <div class="tab-btn active">My Products</div>

</div>

</div>
    <div class="col-lg-3 service-date input-group date" id="datepicker">
        <input type="date" class="form-control" id="date" placeholder="DD-MM-YYYY" />

</div>
</section>

</div>

</div>
<div class="row row-cols-md-5" id="myproductData">

</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">
<input type="hidden" name="datefor" id="datefor" value="0">
<?php include "footer.php" ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var dateInput = document.getElementById('date');
        var placeholderFormat = 'dd-mm-yyyy';

dateInput.placeholder = placeholderFormat;
    });

function checkSingleDate() {
        $('.error').html('');
        let date = $('#date').val();

if (date == "") {
            $('.singleDateError').html('Select Date');
            return false
        }
        myproducts();
    }
    let dataTable;
    let width = $(window).width();
    let recordsPerPage;
    if (width < 768) {
        recordsPerPage = 3; // set 3 records per page for small screens
    } else {
        recordsPerPage = 9; // set 9 records per page for larger screens
    }

$(document).ready(function() {
        let id = $('#id1').val();
        myproducts();

function myproducts() {
            let date = $('#date').val();
            if (date != "") {

data = {
                    limit: recordsPerPage,
                    offset: 0,
                    id: id,
                    fromDate: date
                }
            } else {
                <?php $_SESSION['date'] = ""; ?>
                data = {
                    limit: recordsPerPage,
                    offset: 0,
                    id: id
                }
            }
            $.ajax({
                url: 'App/myproducts.php',
                type: "POST",
                data: data,
                success: function(data) {
                    data1 = JSON.parse(data);
                    $('#appendData').html(data1.myproductData);
                }
            })
            $.ajax({
                url: 'App/count.php',
                type: "POST",
                data: {
                    id: id,
                    fromDate: date
                },
                success: function(data) {
                    data1 = JSON.parse(data);
                    $('#pgCount').val(data1);
                    // var pgCount = document.getElementById("pgCount");
                    // pgCount.value = data1;
                    recall();
                }
            })

}
        $('#p1').click(function() {
            location.replace('products.php');
        })
        $("#datepicker").on("change", function() {
            let selectedDate = $(this).val();
            myproducts();
            recall();

});
        recall();
    });

function recall() {
        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',
        })
        let id = $('#id1').val();
        //page click action
        $('#pagination-here').on("page", function(event, num) {
            $('#pgNum').val(num);
            let date = $('#date').val();
            if (date != "") {
                date1 = date;
            } else {
                date1 = "";
            }
            var min = num * recordsPerPage - recordsPerPage;
            $.ajax({
                url: 'App/myproducts.php',
                type: "POST",
                data: {
                    limit: recordsPerPage,
                    offset: min,
                    id: id,
                    fromDate: date1
                },
                success: function(data) {
                    data1 = JSON.parse(data);
                    $('#appendData').html(data1.myproductData);
                    $('#pgCount').val(data1.count);
                }
            })
        });
    }
</script>