Merge pull request #58 from anxkhn/feat/pagination-ui

feat: add configurable rows-per-page selector

Author: kuutsav

index.html

@@ -109,8 +109,10 @@
 
             </div>
             <div class="col-12 col-md-6 d-flex align-items-center justify-content-md-end justify-content-start mt-2 mt-md-0">
-                <select id="pageSelect" class="form-select form-select-sm" style="max-width: 72px;"></select>
-                <button id="prevPage" class="ms-2 px-2 btn btn-secondary btn-sm">Previous</button>
+                <span class="me-2 text-secondary" style="font-size: 12px;">Rows per page:</span>
+                <select id="pageSizeSelect" class="form-select form-select-sm" style="max-width: 72px;"></select>
+                <span id="showingText" class="ms-3 me-2 text-secondary" style="font-size: 12px; white-space: nowrap;">Showing 0–0 of 0</span>
+                <button id="prevPage" class="ms-2 px-2 btn btn-secondary btn-sm">Prev</button>
                 <button id="nextPage" class="ms-2 px-2 btn btn-primary btn-sm">Next</button>
             </div>
         </div>

script.js

@@ -1,7 +1,8 @@
 // Constants and Variables
 const minDataPointsForBoxPlot = 2;
 const validYoeBucket = new Set(["Entry (0-1)", "Mid (2-6)", "Senior (7-10)", "Senior + (11+)"]);
-const offersPerPage = 10;
+let offersPerPage = 10;
+let pageSize = 10;
 let currentPage = 1;
 let offers = [];
 let filteredOffers = [];
@@ -292,6 +293,8 @@ function displayOffers(page) {
     container.innerHTML = '';
     container.appendChild(table);
     renderPageOptions();
+    renderShowingText();
+    updatePrevNextDisabledState();
 
 }
 
@@ -330,19 +333,68 @@ function sortOffers(column) {
     displayOffers(currentPage);
 }
 
+function computeTotalPages() {
+    const pageSizeSelect = document.getElementById('pageSizeSelect');
+    let selected = pageSizeSelect ? pageSizeSelect.value : String(pageSize);
+    if (!selected) {
+        selected = String(pageSize || 10);
+    }
+    if (selected === 'all') {
+        pageSize = 'all';
+        offersPerPage = filteredOffers.length || 1;
+        totalPages = 1;
+        currentPage = 1;
+    } else {
+        const parsed = parseInt(selected, 10);
+        pageSize = Number.isNaN(parsed) || parsed <= 0 ? 10 : parsed;
+        offersPerPage = pageSize;
+        totalPages = Math.ceil(filteredOffers.length / offersPerPage) || 1;
+        if (currentPage > totalPages) currentPage = totalPages;
+        if (currentPage < 1) currentPage = 1;
+    }
+}
+
 function renderPageOptions() {
-    const pageSelect = document.getElementById('pageSelect');
-    pageSelect.innerHTML = '';
-
-    for (let i = 1; i <= totalPages; i++) {
-        const option = document.createElement('option');
-        option.value = i;
-        option.textContent = i;
-        if (i === currentPage) {
-            option.selected = true;
-        }
-        pageSelect.appendChild(option);
+    // Ensure rows-per-page options exist and reflect current selection
+    const pageSizeSelect = document.getElementById('pageSizeSelect');
+    if (!pageSizeSelect) return;
+    if (pageSizeSelect.options.length === 0) {
+        [10, 20, 50, 100].forEach(size => {
+            const opt = document.createElement('option');
+            opt.value = String(size);
+            opt.textContent = String(size);
+            pageSizeSelect.appendChild(opt);
+        });
+        const allOpt = document.createElement('option');
+        allOpt.value = 'all';
+        allOpt.textContent = 'All';
+        pageSizeSelect.appendChild(allOpt);
     }
+    // Set selected
+    Array.from(pageSizeSelect.options).forEach(opt => {
+        opt.selected = (opt.value === String(pageSize));
+    });
+}
+
+function renderShowingText() {
+    const showingTextEl = document.getElementById('showingText');
+    if (!showingTextEl) return;
+    const total = filteredOffers.length;
+    if (total === 0) {
+        showingTextEl.textContent = 'Showing 0–0 of 0';
+        return;
+    }
+    const start = (currentPage - 1) * offersPerPage + 1;
+    const end = Math.min(currentPage * offersPerPage, total);
+    showingTextEl.textContent = `Showing ${start}–${end} of ${total}`;
+}
+
+function updatePrevNextDisabledState() {
+    const prevBtn = document.getElementById('prevPage');
+    const nextBtn = document.getElementById('nextPage');
+    if (!prevBtn || !nextBtn) return;
+    prevBtn.disabled = currentPage <= 1;
+    nextBtn.disabled = currentPage >= totalPages || (currentPage * offersPerPage) >= filteredOffers.length;
 }
 
 function mostOfferCompanies(jsonData) {
@@ -401,7 +453,8 @@ document.addEventListener('DOMContentLoaded', async function () {
         const data = await response.json();
         offers = data;
         filteredOffers = [...offers];
-        totalPages = Math.ceil(filteredOffers.length / offersPerPage);
+        renderPageOptions();
+        computeTotalPages();
         displayOffers(currentPage);
     }
 
@@ -430,9 +483,11 @@ document.addEventListener('DOMContentLoaded', async function () {
         }
     });
 
-    // Page selection dropdown event listener
-    document.getElementById('pageSelect').addEventListener('change', (event) => {
-        currentPage = parseInt(event.target.value);
+    // no page number dropdown in the UI
+
+    // Page size dropdown event listener
+    document.getElementById('pageSizeSelect').addEventListener('change', () => {
+        computeTotalPages();
         displayOffers(currentPage);
     });
     function filterOffers() {
@@ -464,8 +519,7 @@ document.addEventListener('DOMContentLoaded', async function () {
         }
 
         filteredOffers = tempFilteredOffers;
-        totalPages = Math.ceil(filteredOffers.length / offersPerPage);
-        currentPage = 1;
+        computeTotalPages();
 
         // Update UI elements
         setStatsStr(filteredOffers);