History: keep pagination over filtered/sorted set, pin pager to page bottom (#133)

2026-09-09 22:48:25 -05:00
parent 0ceeabc810
commit fa2e9b1bb5
2 changed files with 28 additions and 5 deletions
@@ -90,10 +90,31 @@ const PaletteTable = (() => {
        if (opts.hasPager && pager && showing) {
          const pages = Math.max(1, Math.ceil(state.total / opts.perPage));
          if (filtered || state.sortKey) {
-            showing.textContent = state.sortKey
-              ? 'Sorted by ' + state.sortKey + ' (' + (state.sortDir === 1 ? 'ascending' : 'descending') + ') · ' + items.length.toLocaleString() + ' of ' + state.total.toLocaleString()
-              : 'Showing ' + items.length.toLocaleString() + ' matches for "' + state.filter + '"';
-            pager.innerHTML = '';
+            // Pagination operates over the FILTERED set (#133): never hide the bar.
+            const filtPages = Math.max(1, Math.ceil(items.length / opts.perPage));
+            if (state.page > filtPages) state.page = filtPages;
+            const fOff = (state.page - 1) * opts.perPage;
+            const view = items.slice(fOff, fOff + opts.perPage);
+            rows.innerHTML = view.length ? view.map(opts.rowHtml).join('') : '';
+            if (!view.length) {
+              empty.style.display = 'block';
+              empty.textContent = filtered ? opts.emptyFiltered : opts.emptyAll;
+            }
+            showing.textContent = `Showing ${view.length === 0 ? 0 : fOff+1}–${fOff+view.length} of ${items.length.toLocaleString()} ${filtered ? 'matches' : 'sorted'} · page ${state.page} of ${filtPages}`;
+            const btns = [];
+            const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
+            add('‹', state.page-1, {dis: state.page===1});
+            const win = new Set([1, 2, state.page-1, state.page, state.page+1, filtPages]);
+            let last = 0;
+            for (let i = 1; i <= filtPages; i++) {
+              if (win.has(i)) {
+                if (last && i - last > 1) btns.push('<span class="dim">…</span>');
+                add(String(i), i, {on: i===state.page});
+                last = i;
+              }
+            }
+            add('›', state.page+1, {dis: state.page===filtPages});
+            pager.innerHTML = btns.join('');
          } else {
            showing.textContent = state.total === 0 ? 'Nothing here yet' :
              `Showing ${off+1}–${Math.min(off+opts.perPage, state.total)} of ${state.total.toLocaleString()} · page ${state.page} of ${pages}`;
@@ -126,6 +147,7 @@ const PaletteTable = (() => {
      if (!th) return;
      const k = th.dataset.sort;
      if (state.sortKey === k) { state.sortDir = -state.sortDir; } else { state.sortKey = k; state.sortDir = 1; }
+      state.page = 1;
      renderSortIndicators();
      load();
    });