77 lines
3.2 KiB
PHTML
Executable File
77 lines
3.2 KiB
PHTML
Executable File
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
|
|
<div class="text-muted small">
|
|
<span id="paginationInfo" class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle me-2 text-success"></i>
|
|
<span>Showing facilities</span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Pagination controls -->
|
|
<nav class="bg-transparent" aria-label="Facility table pagination">
|
|
<ul class="pagination pagination-sm mb-0 border-2 rounded border-success" id="paginationControls">
|
|
<!-- First page button -->
|
|
<li class="page-item">
|
|
<a class="page-link border-0 text-success" href="#" aria-label="First" id="firstPage">
|
|
<i class="bi bi-chevron-double-left"></i>
|
|
</a>
|
|
</li>
|
|
<!-- Previous page button -->
|
|
<li class="page-item">
|
|
<a class="page-link border-0 text-success" href="#" aria-label="Previous" id="prevPage">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Dynamic page numbers will be inserted here as list items -->
|
|
|
|
<!-- Next page button -->
|
|
<li class="page-item">
|
|
<a class="page-link border-0 text-success" href="#" aria-label="Next" id="nextPage">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
<!-- Last page button -->
|
|
<li class="page-item">
|
|
<a class="page-link border-0 text-success" href="#" aria-label="Last" id="lastPage">
|
|
<i class="bi bi-chevron-double-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Items per page selector -->
|
|
<div class="d-flex align-items-center">
|
|
<label for="itemsPerPage" class="form-label text-muted small mb-0 me-2">Items per page:</label>
|
|
<select class="form-select form-select-sm" id="itemsPerPage" style="width: 70px;">
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set up items per page selector
|
|
const itemsPerPageSelect = document.getElementById('itemsPerPage');
|
|
if (itemsPerPageSelect) {
|
|
itemsPerPageSelect.addEventListener('change', function() {
|
|
// Update items per page in the pagination system
|
|
if (typeof itemsPerPage !== 'undefined') {
|
|
itemsPerPage = parseInt(this.value);
|
|
currentPage = 1; // Reset to first page
|
|
|
|
// Recalculate total pages
|
|
if (typeof filteredData !== 'undefined' && typeof totalPages !== 'undefined') {
|
|
totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
|
|
|
// Update table with new pagination
|
|
if (typeof updateTableWithPagination === 'function') {
|
|
updateTableWithPagination();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script> |