From 957b1f224904d05fd16cbc75f9b67e4bf4f4bb2e Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 11:46:03 +0800
Subject: [PATCH] Added Pagination on payouts table

---
 vendor-payouts.php | 74 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 2 deletions(-)
diff --git a/vendor-payouts.php b/vendor-payouts.php
index 43b27ad..bc8ff57 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -78,6 +78,23 @@ $vendorPayoutData = json_decode($response, true);
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>
+        #pagination {
+            display: flex;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            justify-content: center;
+        }
+
+        #pagination a {
+            color: #333;
+            text-decoration: none;
+            padding: 5px 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+    </style>
 </head>
 
 <body class="shop_page">
@@ -259,14 +276,16 @@ $vendorPayoutData = json_decode($response, true);
 
                                                 </tr>
                                             </thead>
-                                            <tbody>
+                                            <tbody id='payoutsTableContent'>
                                                 <?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")) { ?>
+                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { 
+                                                        $payoutsCount++; ?>
                                                         <tr>
                                                             <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
                                                             <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
@@ -298,6 +317,7 @@ $vendorPayoutData = json_decode($response, true);
                                             </tbody>
                                         </table>
                                     </div>
+                                    <div id='pagination'></div>
                                 </div>
                             </div>
                         </div>
@@ -704,6 +724,56 @@ $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
+    </script>
 
 
 
