Obanana.Corporation
/
obanana_b2b_test
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Pagination on payouts table

This commit is contained in:
jouls 2024-03-26 11:46:03 +08:00
parent d941237b30
commit 957b1f2249
1 changed files with 72 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
vendor-payouts.php
View File

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