corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

table controls mobile friendly
All checks were successful
Build and Push Docker Image / build (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-09-18 12:17:16 +01:00
parent bc04ec0996
commit 1ae571489d
1 changed files with 21 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/static/js/table.js
View File

@ -318,40 +318,35 @@ function createTable(containingSelector, tableId) {
function createTableControls(containingSelector, pageSizeId) {
$(containingSelector).append(`
<div class="table-controls row mb-3 px-sm-3">
<div class="col-lg-2">
<div class="table-page-info d-flex justify-content-start align-items-center mx-auto">
<span class="pageinfo-total"></span>
<div class="table-controls row px-sm-3 mb-4">
<div class="col-lg-6">
<nav class="table-pagination mb-4 mb-lg-0">
<ul class="pagination mb-0">
<li class="page-item">
<button type="button" class="page-link page-prev rounded-start-1">
<i class="bi bi-chevron-left"></i>
</button>
</li>
<li class="page-item">
<button type="button" class="page-link page-next rounded-end-1">
<i class="bi bi-chevron-right"></i>
</button>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-lg-8">
<nav class="table-pagination d-flex justify-content-center">
<ul class="pagination mb-0">
<li class="page-item">
<button type="button" class="page-link page-prev rounded-start-1">
<i class="bi bi-chevron-left"></i>
</button>
</li>
<li class="page-item">
<button type="button" class="page-link page-next rounded-end-1">
<i class="bi bi-chevron-right"></i>
</button>
</li>
</ul>
</nav>
</div>
<div class="col-lg-2">
<div class="d-flex justify-content-end">
<label for="${pageSizeId}" class="form-label align-self-center mb-0 me-2">Per Page</label>
<div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
<label for="${pageSizeId}" class="form-label align-self-center mb-0 me-2">Show</label>
<select name="${pageSizeId}" id="${pageSizeId}" class="select-2 table-page-sizer">
<option value="10" selected>10&emsp;</option>
<option value="15">15&emsp;</option>
<option value="20">20&emsp;</option>
<option value="25">25&emsp;</option>
</select>
&nbsp;of&nbsp;
<span class="pageinfo-total text-nowrap"></span>
</div>
</div>
</div>
`);
$("#" + pageSizeId).select2({
@ -372,17 +367,8 @@ function updateTableContainer(containerId, page, pageSize, itemsCount, totalItem
nextExists,
prevExists
);
updateTablePaginationInfo(
`#${containerId} .table-page-info`,
itemsCount,
totalItemsCount
);
}
// Updates the pagination text for a given pageInfoId
function updateTablePaginationInfo(pageInfoId, showing, total) {
$(`${pageInfoId} .pageinfo-showing`).text(showing);
$(`${pageInfoId} .pageinfo-total`).text(`${total} Result${total > 1 ? "s" : ""}`);
$(`#${containerId} .pageinfo-total`).text(`${totalItemsCount} Result${totalItemsCount !== 1 ? "s" : ""}`);
}
// Updates the pagination buttons for a given pageControlsId