diff --git a/apps/home/static/home/js/tables.js b/apps/home/static/home/js/tables.js index 2f3f317..2a1558f 100644 --- a/apps/home/static/home/js/tables.js +++ b/apps/home/static/home/js/tables.js @@ -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() { }); -} \ No newline at end of file +} + +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 = $("