update tgl 13 mei
This commit is contained in:
whywdd
parent
ecf05a3100
commit
e9b5d56ed0
|
|
@ -159,6 +159,25 @@ function calculateBalancePHP($previousBalance, $debit, $kredit, $accountType) {
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Filter Rows per Page -->
|
||||||
|
<div class="flex items-center justify-between mt-4 bg-white p-4 rounded-lg shadow-sm">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span class="text-sm text-gray-700">Rows per page:</span>
|
||||||
|
<select id="rowsPerPage" class="border rounded-md py-1 px-2 text-sm focus:outline-none focus:ring focus:border-blue-300">
|
||||||
|
<option value="5">5</option>
|
||||||
|
<option value="10" selected>10</option>
|
||||||
|
<option value="15">15</option>
|
||||||
|
<option value="all">All</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button id="prevPage" class="text-sm px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">Previous</button>
|
||||||
|
<span id="pageIndicator" class="text-sm text-gray-700">Page 1 of 14</span>
|
||||||
|
<button id="nextPage" class="text-sm px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">Next</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
|
|
@ -248,6 +267,49 @@ function calculateBalancePHP($previousBalance, $debit, $kredit, $accountType) {
|
||||||
page-break-after: always;
|
page-break-after: always;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Styling untuk pagination */
|
||||||
|
.pagination-container {
|
||||||
|
background-color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rowsPerPage {
|
||||||
|
background-color: white;
|
||||||
|
border-color: #e2e8f0;
|
||||||
|
padding: 0.25rem 2rem 0.25rem 0.5rem;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||||
|
background-position: right 0.5rem center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 1.5em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-button {
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
color: #374151;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-button:hover:not(:disabled) {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageIndicator {
|
||||||
|
color: #374151;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -314,5 +376,86 @@ function hapusData(id) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Pagination Logic
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const tables = document.querySelectorAll('table');
|
||||||
|
|
||||||
|
tables.forEach(table => {
|
||||||
|
const tbody = table.querySelector('tbody');
|
||||||
|
const rows = tbody.querySelectorAll('tr');
|
||||||
|
const rowsPerPageSelect = table.parentElement.parentElement.querySelector('#rowsPerPage');
|
||||||
|
const prevButton = table.parentElement.parentElement.querySelector('#prevPage');
|
||||||
|
const nextButton = table.parentElement.parentElement.querySelector('#nextPage');
|
||||||
|
const pageIndicator = table.parentElement.parentElement.querySelector('#pageIndicator');
|
||||||
|
|
||||||
|
let currentPage = 1;
|
||||||
|
let rowsPerPage = parseInt(rowsPerPageSelect.value);
|
||||||
|
|
||||||
|
function updatePagination() {
|
||||||
|
const totalRows = rows.length;
|
||||||
|
const totalPages = rowsPerPage === 'all' ? 1 : Math.ceil(totalRows / rowsPerPage);
|
||||||
|
|
||||||
|
// Reset all rows
|
||||||
|
rows.forEach(row => {
|
||||||
|
row.classList.remove('active');
|
||||||
|
row.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (rowsPerPage === 'all') {
|
||||||
|
// Show all rows
|
||||||
|
rows.forEach(row => {
|
||||||
|
row.classList.add('active');
|
||||||
|
row.style.display = 'table-row';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Show only rows for current page
|
||||||
|
const start = (currentPage - 1) * rowsPerPage;
|
||||||
|
const end = Math.min(start + rowsPerPage, totalRows);
|
||||||
|
|
||||||
|
for (let i = start; i < end; i++) {
|
||||||
|
rows[i].classList.add('active');
|
||||||
|
rows[i].style.display = 'table-row';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update buttons state
|
||||||
|
prevButton.disabled = currentPage === 1;
|
||||||
|
nextButton.disabled = currentPage === totalPages;
|
||||||
|
|
||||||
|
// Update page indicator
|
||||||
|
if (rowsPerPage === 'all') {
|
||||||
|
pageIndicator.textContent = 'Showing all rows';
|
||||||
|
} else {
|
||||||
|
pageIndicator.textContent = `Page ${currentPage} of ${totalPages}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Listeners
|
||||||
|
rowsPerPageSelect.addEventListener('change', function() {
|
||||||
|
rowsPerPage = this.value === 'all' ? 'all' : parseInt(this.value);
|
||||||
|
currentPage = 1;
|
||||||
|
updatePagination();
|
||||||
|
});
|
||||||
|
|
||||||
|
prevButton.addEventListener('click', function() {
|
||||||
|
if (currentPage > 1) {
|
||||||
|
currentPage--;
|
||||||
|
updatePagination();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
nextButton.addEventListener('click', function() {
|
||||||
|
const totalPages = rowsPerPage === 'all' ? 1 : Math.ceil(rows.length / rowsPerPage);
|
||||||
|
if (currentPage < totalPages) {
|
||||||
|
currentPage++;
|
||||||
|
updatePagination();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize pagination
|
||||||
|
updatePagination();
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
Reference in New Issue