From c3523bfddc86621ca2b03583189310362cdfbc39 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 13:53:58 +0800
Subject: [PATCH] Added Data Table Responsiveness

---
 vendor-payouts.php | 68 ++++++++--------------------------------------
 1 file changed, 12 insertions(+), 56 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index bc8ff57..2256f05 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -72,6 +72,9 @@ $vendorPayoutData = json_decode($response, true);
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
     <link rel="stylesheet" href="assets/css/responsive.css" />
+    <link href="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.css" rel="stylesheet">
+ 
+
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
@@ -263,8 +266,8 @@ $vendorPayoutData = json_decode($response, true);
                                 </div>
                                 <div class="col-md-12 mt-3">
                                     <h5><strong>Payout History</strong></h5>
-                                    <div class="table-responsive">
-                                        <table id="example" class="table ec-table">
+                                    <div class="table-responsive p-4">
+                                        <table id='payoutsTableContent' class="table ec-table">
                                             <thead>
                                                 <tr>
                                                     <th scope="col">Amount</th>
@@ -276,16 +279,14 @@ $vendorPayoutData = json_decode($response, true);
 
                                                 </tr>
                                             </thead>
-                                            <tbody id='payoutsTableContent'>
+                                            <tbody >
                                                 <?php
-                                                $payoutsCount = 0;
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
                                                     $status = ucfirst(strtolower($val['status']));
                                                     $payoutDate = date("F d, Y", strtotime($val['createdAt']));
                                                     $payoutId = $val['_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { 
-                                                        $payoutsCount++; ?>
+                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { ?>
                                                         <tr>
                                                             <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
                                                             <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
@@ -580,6 +581,8 @@ $vendorPayoutData = json_decode($response, true);
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
+    <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
+	
     <!-- <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
@@ -725,58 +728,11 @@ $vendorPayoutData = json_decode($response, true);
         });
     </script>
     <script>
-        const itemsPerPage = 8;
-        const totalItems = <?php echo $payoutsCount; ?>
-        const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-        
-        function showPage(page) {
-            const startIndex = (page - 1) * itemsPerPage;
-            const endIndex = startIndex + itemsPerPage;
-            const tableRows = document.querySelectorAll('#payoutsTableContent tr');
-            
-            // for pagination button
-            const pager = document.querySelectorAll('.page-btn')
-            pager.forEach((row, index) => {
-                if (index!==page-1) {
-                    row.style.backgroundColor="white";
-                    row.style.color="black";
-                } else {
-                    row.style.backgroundColor="#007bff";
-                    row.style.color="white";
-                }
-            });
-
-            
-            tableRows.forEach((row, index) => {
-                if (index >= startIndex && index < endIndex) {
-                    row.style.display = 'table-row';
-                } else {
-                    row.style.display = 'none';
-                }
-            });
-        }
-
-        function createPagination() {
-            const paginationContainer = document.getElementById('pagination');
-
-            for (let i = 1; i <= totalPages; i++) {
-                // created a tag
-                const pageButton = document.createElement('a');
-                // created class for a tag
-                pageButton.className = "page-btn page-" + i
-                pageButton.textContent = i;
-                pageButton.addEventListener('click', () => showPage(i));
-                paginationContainer.appendChild(pageButton);
-            }
-        }
-
-        createPagination();
-        showPage(1); // Show the first page by default
+   $(document).ready( function () {
+    $('#payoutsTableContent').DataTable();
+    } );
     </script>
 
-
-
 </body>
 
 </html>
\ No newline at end of file