112 lines
3.8 KiB
JavaScript
112 lines
3.8 KiB
JavaScript
|
|
// Updates the pagination text for a given pageInfoId
|
|
function updateTablePaginationInfo(pageInfoId, showing, total) {
|
|
$(`${pageInfoId} .pageinfo-showing`).text(showing);
|
|
$(`${pageInfoId} .pageinfo-total`).text(total);
|
|
}
|
|
|
|
// Updates the pagination buttons for a given pageControlsId
|
|
function updateTablePagination(pageControlsId, currentPage, pageSize, totalItems, nextExists, prevExists) {
|
|
$(pageControlsId).attr("data-page", currentPage);
|
|
|
|
// Remove existing page specific buttons
|
|
$(`${pageControlsId} .page-pick`).remove();
|
|
|
|
// Determine states of 'previous page' 'next page' buttons
|
|
$(`${pageControlsId} .page-prev`).toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
|
|
$(`${pageControlsId} .page-next`).toggleClass("disabled", !nextExists).attr("tabindex", nextExists ? "" : "-1");
|
|
|
|
// Calculate amount of pages to account for
|
|
const pages = Math.max(Math.ceil(totalItems / pageSize), 1);
|
|
const maxVisiblePages = 5;
|
|
|
|
let startPage, endPage;
|
|
|
|
if (pages <= maxVisiblePages) {
|
|
// If total pages are less than or equal to max visible pages, show all
|
|
startPage = 1;
|
|
endPage = pages;
|
|
} else {
|
|
// Determine the start and end pages
|
|
const halfVisible = Math.floor(maxVisiblePages / 2);
|
|
|
|
if (currentPage <= halfVisible) {
|
|
startPage = 1;
|
|
endPage = maxVisiblePages;
|
|
} else if (currentPage + halfVisible >= pages) {
|
|
startPage = pages - maxVisiblePages + 1;
|
|
endPage = pages;
|
|
} else {
|
|
startPage = currentPage - halfVisible;
|
|
endPage = currentPage + halfVisible;
|
|
}
|
|
}
|
|
|
|
if (startPage > 1) {
|
|
addPageButton(pageControlsId, 1);
|
|
if (startPage > 2) {
|
|
addEllipsis(pageControlsId);
|
|
}
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
addPageButton(pageControlsId, i, currentPage);
|
|
}
|
|
|
|
if (endPage < pages) {
|
|
if (endPage < pages - 1) {
|
|
addEllipsis(pageControlsId);
|
|
}
|
|
addPageButton(pageControlsId, pages);
|
|
}
|
|
}
|
|
|
|
function addPageButton(pageControlsId, pageNumber, currentPage) {
|
|
let pageItem = $("<li>").addClass("page-item");
|
|
let pageLink = $("<button>")
|
|
.attr("type", "button")
|
|
.attr("data-page", pageNumber)
|
|
.addClass("page-link page-pick")
|
|
.text(pageNumber);
|
|
|
|
if (pageNumber === currentPage) {
|
|
pageLink.addClass("disabled").attr("tabindex", -1);
|
|
}
|
|
|
|
pageItem.append(pageLink);
|
|
$(`${pageControlsId} .pagination .page-next`).parent().before(pageItem);
|
|
}
|
|
|
|
function addEllipsis(pageControlsId) {
|
|
let ellipsisItem = $("<li>").addClass("page-item disabled");
|
|
let ellipsisLink = $("<span>").addClass("page-link page-pick").text("...");
|
|
ellipsisItem.append(ellipsisLink);
|
|
$(`${pageControlsId} .pagination .page-next`).parent().before(ellipsisItem);
|
|
}
|
|
|
|
// Bind the table pagination buttons to control the table pagination
|
|
async function bindTablePagination(pageControlsId, dataLoadFunc) {
|
|
$(`${pageControlsId} .pagination`).on("click", ".page-link", async function() {
|
|
let wantedPage;
|
|
let currentPage = parseInt($(pageControlsId).attr("data-page"));
|
|
|
|
if ($(this).hasClass("page-prev"))
|
|
wantedPage = currentPage - 1;
|
|
else if ($(this).hasClass("page-next"))
|
|
wantedPage = currentPage + 1;
|
|
else
|
|
wantedPage = $(this).attr("data-page");
|
|
|
|
await dataLoadFunc(getCurrentlyActiveServer().guild_id, wantedPage)
|
|
});
|
|
}
|
|
|
|
// Bind the table pagination page resizer control
|
|
async function bindTablePaginationResizer(resizerControlId, dataLoadFunc) {
|
|
$(resizerControlId).on("change", async function() {
|
|
const page = 1;
|
|
const pageSize = $(this).val();
|
|
|
|
await dataLoadFunc(getCurrentlyActiveServer().guild_id, page, pageSize);
|
|
});
|
|
} |