Merge pull request #209 from Osalotioman/enhance/paginate-table

teorth · web-flow · commit 91d4d4ec6e28 · 2026-01-11T13:31:43.000-08:00
enhance: Paginate Table
diff --git a/docs/app.js b/docs/app.js
@@ -8,6 +8,94 @@ let allProblems = [];
 let filteredProblems = [];
 let currentSort = { column: 'number', direction: 'asc' };
 
+// Pagination
+const DEFAULT_PAGE_SIZE = 100;
+let currentPage = 1;
+let pageSize = DEFAULT_PAGE_SIZE;
+
+function getPageSizeFromUI() {
+    const input = document.getElementById('page-size');
+    if (!input) return pageSize;
+
+    // Keep the last valid value while the user is typing.
+    const value = input.value.trim();
+    if (!/^[1-9]\d*$/.test(value)) return pageSize;
+
+    // Regex guarantees a positive integer.
+    return Number(value);
+}
+
+function setPageSizeInUI(size) {
+    const input = document.getElementById('page-size');
+    if (!input) return;
+    input.value = String(size);
+}
+
+function resetToFirstPageAndUpdate() {
+    currentPage = 1;
+    updateTable();
+}
+
+function updatePaginationUI(totalPages) {
+    const info = document.getElementById('pagination-info');
+    const prevBtn = document.getElementById('pagination-prev');
+    const nextBtn = document.getElementById('pagination-next');
+
+    if (info) {
+        info.textContent = `Page ${currentPage.toLocaleString()} / ${totalPages.toLocaleString()}`;
+    }
+    if (prevBtn) {
+        prevBtn.disabled = currentPage <= 1;
+    }
+    if (nextBtn) {
+        nextBtn.disabled = currentPage >= totalPages;
+    }
+}
+
+function initializePaginationListeners() {
+    const prevBtn = document.getElementById('pagination-prev');
+    const nextBtn = document.getElementById('pagination-next');
+    const pageSizeInput = document.getElementById('page-size');
+
+    if (prevBtn) {
+        prevBtn.addEventListener('click', () => {
+            currentPage = Math.max(1, currentPage - 1);
+            updateTable();
+        });
+    }
+
+    if (nextBtn) {
+        nextBtn.addEventListener('click', () => {
+            currentPage += 1;
+            updateTable();
+        });
+    }
+
+    if (pageSizeInput) {
+        let inputTimeout;
+
+        const applyPageSize = () => {
+            const newSize = getPageSizeFromUI();
+            pageSize = newSize;
+            // Changing page size should reset to page 1
+            currentPage = 1;
+            updateTable(); // updateTable will save state to URL
+        };
+
+        // Update as the user types, but debounce so we don't re-render on every keystroke.
+        pageSizeInput.addEventListener('input', () => {
+            clearTimeout(inputTimeout);
+            inputTimeout = setTimeout(applyPageSize, 250);
+        });
+
+        // Commit immediately on blur/enter (change fires on commit)
+        pageSizeInput.addEventListener('change', () => {
+            clearTimeout(inputTimeout);
+            applyPageSize();
+        });
+    }
+}
+
 /**
  * Load problems from YAML file
  * @returns {Promise<Array<Object>>} Array of problem objects
@@ -101,7 +189,8 @@ function renderTable(problems) {
 
     if (problems.length === 0) {
         tableBody.innerHTML = '<tr><td colspan="7" class="loading-cell">No problems match the current filters.</td></tr>';
-        updateStats(0, allProblems.length);
+        // With pagination, show filtered vs total(allProblems.length) counts (range is empty here)
+        updateStats();
         return;
     }
 
@@ -131,18 +220,27 @@ function renderTable(problems) {
     tableBody.innerHTML = rows;
 
     // Update stats
-    updateStats(problems.length, allProblems.length);
+    updateStats();
 }
 
 /**
  * Update statistics display
- * @param {number} showing - Number of problems currently shown
- * @param {number} total - Total number of problems
  */
-function updateStats(showing, total) {
+function updateStats() {
     const showingCount = document.getElementById('showing-count');
     if (showingCount) {
-        showingCount.textContent = `Showing ${showing.toLocaleString()} of ${total.toLocaleString()} problems`;
+        const filteredTotal = Array.isArray(filteredProblems) ? filteredProblems.length : 0;
+        const start = filteredTotal === 0 ? 0 : ((currentPage - 1) * pageSize + 1);
+        const end = filteredTotal === 0 ? 0 : Math.min(currentPage * pageSize, filteredTotal);
+
+        // N.B: total = allProblems.length i.e total number of problems
+        // Example: "Showing 201–300 of 1,742 (total 2,100) problems"
+        // When no filters are active, filteredTotal === total.
+        if (filteredTotal > 0) {
+            showingCount.textContent = `Showing ${start.toLocaleString()}–${end.toLocaleString()} of ${filteredTotal.toLocaleString()} (total ${allProblems.length.toLocaleString()}) problems`;
+        } else {
+            showingCount.textContent = `Showing 0 of 0 (total ${allProblems.length.toLocaleString()}) problems`;
+        }
     }
 }
 
@@ -167,11 +265,11 @@ function handleSortClick(event) {
     // Update visual indicators
     updateSortIndicators(currentSort.column, currentSort.direction);
 
+    // Sorting should reset pagination
+    currentPage = 1;
+
     // Re-render table
     updateTable();
-
-    // Save state to URL
-    saveStateToURL(getCurrentState());
 }
 
 /**
@@ -194,6 +292,14 @@ function updateTable() {
     // Store filtered results
     filteredProblems = results;
 
+    // Pagination: slice the final, sorted results
+    pageSize = getPageSizeFromUI();
+    const totalPages = Math.max(1, Math.ceil(results.length / pageSize));
+    if (!Number.isFinite(currentPage) || currentPage < 1) currentPage = 1;
+    if (currentPage > totalPages) currentPage = totalPages;
+    const startIndex = (currentPage - 1) * pageSize;
+    const pagedResults = results.slice(startIndex, startIndex + pageSize);
+
     // Update tag and dropdown displays with filtered counts
     const nonTagFiltersActive = hasNonTagFilters();
 
@@ -216,7 +322,10 @@ function updateTable() {
     updateAllDropdownDisplays(allProblems, hasAnyFilters);
 
     // Render
-    renderTable(results);
+    renderTable(pagedResults);
+
+    // Update pagination controls
+    updatePaginationUI(totalPages);
 
     // Save state to URL
     saveStateToURL(getCurrentState());
@@ -263,7 +372,8 @@ async function initialize() {
     }
 
     // Set filter change handler FIRST (before creating any event listeners)
-    setFilterChangeHandler(updateTable);
+    // Any query change should reset pagination.
+    setFilterChangeHandler(resetToFirstPageAndUpdate);
 
     // Extract tag counts and tags
     const tagCounts = extractTagCounts(allProblems);
@@ -290,6 +400,11 @@ async function initialize() {
     currentSort.column = urlState.sortColumn;
     currentSort.direction = urlState.sortDirection;
 
+    // Restore pagination from URL
+    currentPage = urlState.page || 1;
+    pageSize = urlState.pageSize || DEFAULT_PAGE_SIZE;
+    setPageSizeInUI(pageSize);
+
     // Get initial tag sort preference from URL
     const initialTagSort = urlState.tagSort || 'count';
 
@@ -303,6 +418,7 @@ async function initialize() {
     // Initialize event listeners
     initializeSortListeners();
     initializeFilterListeners();
+    initializePaginationListeners();
 
     // Initial render
     updateTable();
diff --git a/docs/index.html b/docs/index.html
@@ -129,6 +129,19 @@ <h1>Erdős Problems Database</h1>
             <span id="loading-indicator" class="loading">Loading data...</span>
         </div>
 
+        <div class="pagination-bar" aria-label="Pagination controls">
+            <div class="pagination-controls">
+                <button id="pagination-prev" class="pagination-btn" type="button">Prev</button>
+                <span id="pagination-info" class="pagination-info">Page 1 / 1</span>
+                <button id="pagination-next" class="pagination-btn" type="button">Next</button>
+            </div>
+
+            <div class="page-size-controls">
+                <label for="page-size" class="page-size-label">Per page:</label>
+                <input id="page-size" class="page-size-input" type="number" inputmode="numeric" min="1" step="1" value="100" />
+            </div>
+        </div>
+
         <div class="table-container">
             <table id="problems-table">
                 <thead>
diff --git a/docs/styles.css b/docs/styles.css
@@ -396,6 +396,75 @@ main {
     font-style: italic;
 }
 
+/* Pagination Bar (minimal) */
+.pagination-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-size: 0.95rem;
+}
+
+.pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.pagination-btn {
+    background-color: var(--button-bg);
+    color: var(--button-text);
+    border: none;
+    border-radius: 4px;
+    padding: 0.4rem 0.75rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.pagination-btn:hover:not(:disabled) {
+    background-color: var(--button-hover);
+}
+
+.pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.pagination-info {
+    color: var(--text-secondary);
+    font-weight: 600;
+}
+
+.page-size-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.page-size-label {
+    font-weight: 600;
+}
+
+.page-size-input {
+    width: 6rem;
+    padding: 0.35rem 0.5rem;
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.page-size-input:focus {
+    outline: none;
+    border-color: var(--input-focus);
+    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
+}
+
 /* Table Container */
 .table-container {
     overflow-x: auto;
diff --git a/docs/url-state.js b/docs/url-state.js
@@ -60,6 +60,15 @@ function saveStateToURL(state) {
         params.set('tagSort', state.tagSort);
     }
 
+    // Pagination
+    if (state.page && state.page !== 1) {
+        params.set('page', String(state.page));
+    }
+
+    if (state.pageSize && state.pageSize !== 100) {
+        params.set('pageSize', String(state.pageSize));
+    }
+
     // Update URL without reload using History API
     const queryString = params.toString();
     const newURL = queryString
@@ -76,6 +85,12 @@ function saveStateToURL(state) {
 function loadStateFromURL() {
     const params = new URLSearchParams(window.location.search);
 
+    const pageRaw = params.get('page') || '1';
+    const page = /^[1-9]\d*$/.test(pageRaw) ? Number(pageRaw) : 1;
+
+    const pageSizeRaw = params.get('pageSize') || '100';
+    const pageSize = /^[1-9]\d*$/.test(pageSizeRaw) ? Number(pageSizeRaw) : 100;
+
     return {
         sortColumn: params.get('sort') || 'number',
         sortDirection: params.get('dir') || 'asc',
@@ -86,7 +101,9 @@ function loadStateFromURL() {
         oeisFilter: params.get('oeis') || '',
         selectedTags: params.get('tags') ? params.get('tags').split(',').filter(tag => tag.trim() !== '') : [],
         tagLogic: params.get('tagLogic') || 'any',
-        tagSort: params.get('tagSort') || 'count'
+        tagSort: params.get('tagSort') || 'count',
+        page,
+        pageSize
     };
 }
 
@@ -242,6 +259,8 @@ function getCurrentState() {
         oeisFilter: oeisFilter ? oeisFilter.value : '',
         selectedTags,
         tagLogic,
-        tagSort
+        tagSort,
+        page: (typeof currentPage !== 'undefined' && Number.isFinite(currentPage)) ? currentPage : 1,
+        pageSize: (typeof pageSize !== 'undefined' && Number.isFinite(pageSize)) ? pageSize : 100
     };
 }
