Add paging and per-column filters to PR table

Remove hardcoded site title from gh-pages template config and enhance the PR table fallback UI: replace simple column-filtering with a paginated, client-side filtering UI. Adds page size selector (10/25/50/100, default 25), info text, pagination controls, and logic to compute filtered rows and render the current page. Keeps the Created-date sort fallback but improves usability for large PR lists.

Author: ReenigneArcher

gh-pages-template/_config.yml

@@ -1,3 +1,2 @@
 ---
-title: LizardByte Developer Dashboard
 site-js: []  # disable crowdin for this site

gh-pages-template/assets/js/dashboard.js

@@ -186,7 +186,7 @@ function renderPRTable(prs) {
         return dt;
     }
 
-    // Fallback: sort by Created date (col 7) ascending, then wire up pure-JS column filters.
+    // Fallback: sort by Created date (col 7) ascending, then add paging + per-column filtering.
     const allRows = Array.from(tbody.querySelectorAll('tr'));
     allRows.sort((a, b) => {
         const aVal = a.querySelectorAll('td')[7]?.textContent || '';
@@ -195,14 +195,88 @@ function renderPRTable(prs) {
     });
     allRows.forEach(row => tbody.appendChild(row));
 
-    function applyFilters() {
+    let pageSize = 25;
+    let currentPage = 0;
+
+    const lengthSel = document.createElement('select');
+    lengthSel.className = 'form-select form-select-sm d-inline-block w-auto';
+    [10, 25, 50, 100].forEach(n => {
+        const opt = document.createElement('option');
+        opt.value = String(n);
+        opt.textContent = String(n);
+        if (n === 25) opt.selected = true;
+        lengthSel.appendChild(opt);
+    });
+    const lengthLabel = document.createElement('label');
+    lengthLabel.className = 'text-muted small me-auto';
+    lengthLabel.append('Show ', lengthSel, ' entries');
+
+    const infoEl = document.createElement('small');
+    infoEl.className = 'text-muted';
+
+    const pagUl = document.createElement('ul');
+    pagUl.className = 'pagination pagination-sm mb-0';
+
+    const topBar = document.createElement('div');
+    topBar.className = 'd-flex align-items-center mb-2';
+    topBar.appendChild(lengthLabel);
+
+    const bottomBar = document.createElement('div');
+    bottomBar.className = 'd-flex justify-content-between align-items-center mt-2 flex-wrap gap-2';
+    bottomBar.append(infoEl, pagUl);
+
+    const table = container.querySelector('table');
+    container.insertBefore(topBar, table);
+    container.appendChild(bottomBar);
+
+    function getFiltered() {
         const filters = filterInputs.map(inp => inp.value.toLowerCase());
-        allRows.forEach(row => {
+        return allRows.filter(row => {
             const cells = Array.from(row.querySelectorAll('td'));
-            row.style.display = filters.every((f, i) => !f || (cells[i]?.textContent || '').toLowerCase().includes(f)) ? '' : 'none';
+            return filters.every((f, i) => !f || (cells[i]?.textContent || '').toLowerCase().includes(f));
         });
     }
-    filterInputs.forEach(inp => inp.addEventListener('input', applyFilters));
+
+    function renderPage() {
+        const filtered = getFiltered();
+        const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+        currentPage = Math.min(currentPage, totalPages - 1);
+        const start = currentPage * pageSize;
+
+        allRows.forEach(r => { r.style.display = 'none'; });
+        filtered.slice(start, start + pageSize).forEach(r => { r.style.display = ''; });
+
+        const from = filtered.length === 0 ? 0 : start + 1;
+        const to = Math.min(start + pageSize, filtered.length);
+        infoEl.textContent = `Showing ${from} to ${to} of ${filtered.length} entries`;
+
+        pagUl.innerHTML = '';
+        const addBtn = (label, page, disabled, active) => {
+            const li = document.createElement('li');
+            li.className = `page-item${disabled ? ' disabled' : ''}${active ? ' active' : ''}`;
+            const btn = document.createElement('button');
+            btn.className = 'page-link';
+            btn.textContent = label;
+            btn.disabled = disabled;
+            if (!disabled) btn.addEventListener('click', () => { currentPage = page; renderPage(); });
+            li.appendChild(btn);
+            pagUl.appendChild(li);
+        };
+        addBtn('Previous', currentPage - 1, currentPage === 0, false);
+        const startP = Math.max(0, Math.min(currentPage - 2, totalPages - 5));
+        for (let p = startP; p < Math.min(totalPages, startP + 5); p++) {
+            addBtn(String(p + 1), p, false, p === currentPage);
+        }
+        addBtn('Next', currentPage + 1, currentPage >= totalPages - 1, false);
+    }
+
+    lengthSel.addEventListener('change', () => {
+        pageSize = parseInt(lengthSel.value, 10);
+        currentPage = 0;
+        renderPage();
+    });
+    filterInputs.forEach(inp => inp.addEventListener('input', () => { currentPage = 0; renderPage(); }));
+    renderPage();
 }
 
 // License treemap