pagination

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() {
 
     });
-}
+}
+
+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);
+}