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

page sizer and total items count

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-09-26 12:29:04 +01:00
parent 4c0928e10c
commit 293c02a6fd
2 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/home/static/home/js/tables.js
View File

@ -36,6 +36,7 @@ function initializeDataTable(tableId, columns) {
] ]
}); });
bindTablePagination(tableId); bindTablePagination(tableId);
bindTablePageSizer(tableId);
} }
@ -81,6 +82,7 @@ function wipeTable(tableId) {
function populateTable(tableId, data) { function populateTable(tableId, data) {
$(tableId).DataTable().rows.add(data.results).draw(false); $(tableId).DataTable().rows.add(data.results).draw(false);
updateTablePagination(tableId, data); updateTablePagination(tableId, data);
updateTableTotalCount(tableId, data);
} }
async function loadTableData(tableId, url, method) { async function loadTableData(tableId, url, method) {
@ -102,9 +104,9 @@ async function loadTableData(tableId, url, method) {
// region Pagination // region Pagination
function bindTablePagination(tableId) { function bindTablePagination(tableId) {
let $paginationArea = $("#subTable").closest('.js-tableBody').siblings('.js-tableControls').find('.pagination'); let $paginationArea = $(tableId).closest('.js-tableBody').siblings('.js-tableControls').find('.pagination');
$paginationArea.on("click", ".page-link", function() { $paginationArea.on("click", ".page-link", function() {
let currentPage = $paginationArea.data("page"); let currentPage = parseInt($paginationArea.data("page"));
let wantedPage; let wantedPage;
if ($(this).hasClass("page-prev")) { if ($(this).hasClass("page-prev")) {
@ -124,12 +126,13 @@ function bindTablePagination(tableId) {
function fixTablePagination(tableId) { function fixTablePagination(tableId) {
let filters = getTableFilters(tableId); let filters = getTableFilters(tableId);
let $pageSizer = $(tableId).closest('.js-tableBody').siblings('.js-tableControls').find(".table-page-sizer");
if (!("page" in filters)) { if (!("page" in filters)) {
setTableFilter(tableId, "page", 1); setTableFilter(tableId, "page", 1);
} }
if (!("page_size" in filters)) { if (!("page_size" in filters)) {
setTableFilter(tableId, "page_size", 1) // TODO: shouldn't be hard coded setTableFilter(tableId, "page_size", $($pageSizer).val())
} }
} }
@ -212,3 +215,19 @@ function AddTablePageEllipsis($paginationArea) {
ellipsisItem.append(ellipsisLink); ellipsisItem.append(ellipsisLink);
$paginationArea.find(".page-next").parent().before(ellipsisItem); $paginationArea.find(".page-next").parent().before(ellipsisItem);
} }
// region Page Sizer
function updateTableTotalCount(tableId, data) {
let $tableControls = $(tableId).closest('.js-tableBody').siblings('.js-tableControls');
$tableControls.find('.pageinfo-total').text(data.count);
}
function bindTablePageSizer(tableId) {
let $tableControls = $(tableId).closest('.js-tableBody').siblings('.js-tableControls');
$tableControls.on("change", ".table-page-sizer", function() {
setTableFilter(tableId, "page", "1");
setTableFilter(tableId, "page_size", $(this).val());
$(tableId).trigger("doDataLoad");
});
}

4
apps/home/templates/home/tabs/subs.html
View File

@ -66,8 +66,8 @@
</nav> </nav>
</div> </div>
<div class="col-lg-6 d-flex align-items-center justify-content-lg-end"> <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
<label for="" class="form-label align-self-center mb-0 me-2">Show</label> <label for="subTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
<select name="" id="" class="select-2 table-page-sizer"> <select name="subTablePageSizer" id="subTablePageSizer" class="select-2 table-page-sizer">
<option value="10" selected>10&emsp;</option> <option value="10" selected>10&emsp;</option>
<option value="15">15&emsp;</option> <option value="15">15&emsp;</option>
<option value="20">20&emsp;</option> <option value="20">20&emsp;</option>