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

pagination

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-09-26 11:34:05 +01:00
parent 8bcd997b4d
commit 014b30c3ec
1 changed files with 96 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,9 +79,12 @@ function wipeTable(tableId) {
function populateTable(tableId, data) {
$(tableId).DataTable().rows.add(data.results).draw(false);
updateTablePagination(tableId, data);
}
async function loadTableData(tableId, url, method) {
fixTablePagination(tableId);
// Create querystring for filtering against the API
let filters = getTableFilters(tableId);
let ordering = getTableOrdering(tableId);
@ -98,8 +101,99 @@ async function loadTableData(tableId, url, method) {
// region Pagination
function bindTablePagination(tableId) { // TODO:
let $paginationArea = $(tableId).parent().find(".table-pagination .pagination")
let $paginationArea = $("#subTable").closest('.js-tableBody').siblings('.js-tableControls').find('.pagination');
$paginationArea.on("click", ".page-link", function() {
});
}
}
function fixTablePagination(tableId) {
let filters = getTableFilters(tableId);
if (!("page" in filters)) {
setTableFilter(tableId, "page", 1);
}
if (!("page_size" in filters)) {
setTableFilter(tableId, "page_size", 15) // TODO: shouldn't be hard coded
}
}
function updateTablePagination(tableId, data) {
let filters = getTableFilters(tableId);
let $paginationArea = $("#subTable").closest('.js-tableBody').siblings('.js-tableControls').find('.pagination');
$paginationArea.data("page", filters.page); // store the page for later
// Remove existing buttons for specific pages
$paginationArea.find(".page-pick").remove();
// Enable/disable 'next' and 'prev' buttons
$paginationArea.find(".page-prev").toggleClass("disabled", !data.previous);
$paginationArea.find(".page-next").toggleClass("disabled", !data.next);
const pagesToShow = Math.max(Math.ceil(data.count / filters.page_size), 1);
const maxPagesToShow = 10;
let startPage = 1;
let endPage;
let page = parseInt(filters.page);
// Determine the start and end page
if (pagesToShow <= maxPagesToShow) {
endPage = pagesToShow;
}
else {
const halfVisible = Math.floor(maxPagesToShow / 2);
if (page <= halfVisible) {
endPage = maxPagesToShow;
}
else if (page + halfVisible >= pagesToShow) {
startPage = pagesToShow - maxPagesToShow + 1;
endPage = pagesToShow;
}
else {
startPage = page - halfVisible;
endPage = page + halfVisible;
}
}
// Add buttons
if (startPage > 1) {
AddTablePageButton($paginationArea, 1);
if (startPage > 2) {
AddTablePageEllipsis($paginationArea);
}
}
for (i = startPage; i <= endPage; i++) {
AddTablePageButton($paginationArea, i, page);
}
if (endPage < pagesToShow) {
if (endPage < pagesToShow - 1) {
AddTablePageEllipsis($paginationArea);
}
AddTablePageButton($paginationArea, pagesToShow);
}
}
function AddTablePageButton($paginationArea, number, currentPage) {
let pageItem = $("<li>").addClass("page-item");
let pageLink = $("<button>")
.attr("type", "button")
.attr("data-page", number)
.addClass("page-link page-pick")
.text(number);
if (number === parseInt(currentPage)) {
pageLink.addClass("disabled").attr("tabindex", -1);
}
pageItem.append(pageLink);
$paginationArea.find(".page-next").parent().before(pageItem);
}
function AddTablePageEllipsis($paginationArea) {
let ellipsisItem = $("<li>").addClass("page-item disabled");
let ellipsisLink = $("<span>").addClass("page-link page-pick").text("...");
ellipsisItem.append(ellipsisLink);
$paginationArea.find(".page-next").parent().before(ellipsisItem);
}