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

Added Data Table Responsiveness

This commit is contained in:
jouls 2024-03-26 13:53:58 +08:00
parent 957b1f2249
commit c3523bfddc
1 changed files with 12 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
vendor-payouts.php
View File

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