encoderPro/PAGINATION-INTEGRATION-GUIDE.md

Pagination Integration Guide

Overview

This guide explains how to replace the infinite scroll with proper pagination and add a status filter dropdown.

Changes Needed

1. Add Status Filter Dropdown to HTML

Location: templates/dashboard.html, around line 568 (near the qualityFilter dropdown)

Replace this section:

<div style="display: flex; gap: 8px; align-items: center;">
    <label style="color: #94a3b8; font-weight: 500;">Filter:</label>
    <select id="qualityFilter" onchange="loadFileQuality()" style="padding: 10px; border-radius: 6px; background: #1e293b; color: #e2e8f0; border: 1px solid #334155;">
        <option value="all">All States</option>
        <option value="discovered">Discovered</option>
        <option value="pending">Pending</option>
        <option value="processing">Processing</option>
        <option value="completed">Completed</option>
        <option value="failed">Failed</option>
        <option value="skipped">Skipped</option>
    </select>
</div>

With this:

<div style="display: flex; gap: 15px; align-items: center;">
    <div style="display: flex; gap: 8px; align-items: center;">
        <label style="color: #94a3b8; font-weight: 500;">Status:</label>
        <select id="statusFilter" onchange="changeStatusFilter(this.value)" style="padding: 10px; border-radius: 6px; background: #1e293b; color: #e2e8f0; border: 1px solid #334155;">
            <option value="all">All States</option>
            <option value="discovered">Discovered</option>
            <option value="pending">Pending</option>
            <option value="processing">Processing</option>
            <option value="completed">Completed</option>
            <option value="failed">Failed</option>
            <option value="skipped">Skipped</option>
        </select>
    </div>
</div>

2. Add Pagination Controls Container

Location: Right after the closing </table> tag for qualityTable, before the </div> that closes the section

Add:

                </table>
            </div>

            <!-- Pagination Controls -->
            <div id="paginationControls"></div>
        </div>

3. Replace JavaScript Code

Location: templates/dashboard.html, lines 1439-1625

Remove:

• All code from // File Quality Analysis to just before function toggleFileSelection
• Remove function loadMoreFiles()
• Remove function handleScroll()

Replace with the code from: pagination-replacement.js

4. Remove Infinite Scroll Event Listeners

Location: In the DOMContentLoaded event listener (around line 718-723)

Remove these lines:

// Add infinite scroll
const tableContainer = document.querySelector('.section:has(#qualityTable)');
if (tableContainer) {
    tableContainer.addEventListener('scroll', handleScroll);
}
window.addEventListener('scroll', handleScroll);

5. Update applyFilter Function

Location: Around line 1613 in the current file

Find:

function applyFilter(filterType) {
    // Update current filter
    currentAttributeFilter = filterType === 'all' ? null : filterType;

    // Update button styles...

    // Reload the file list with the new filter
    loadFileQuality();
}

Update to:

function applyFilter(filterType) {
    // Update current filter
    currentAttributeFilter = filterType === 'all' ? null : filterType;
    currentPage = 1; // Reset to first page when changing filter

    // Update button styles to show active filter
    document.querySelectorAll('.filter-btn').forEach(btn => {
        const btnFilter = btn.getAttribute('data-filter');
        if (btnFilter === filterType) {
            btn.style.background = '#3b82f6';
            btn.style.fontWeight = '600';
        } else {
            btn.style.background = '#64748b';
            btn.style.fontWeight = '400';
        }
    });

    // Reload the file list with the new filter
    loadFileQuality();
}

6. Remove Old qualityFilter References

Search for: document.getElementById('qualityFilter')

Remove or update any references to the old qualityFilter dropdown since we're replacing it with statusFilter

Key Features of New Pagination

Status Filter Dropdown

• Select by status: All, Discovered, Pending, Processing, Completed, Failed, Skipped
• Independent from attribute filters
• Resets to page 1 when changed

Pagination Controls

• Previous/Next buttons for navigation
• Page indicator showing current page and file range
• Go to page input for jumping to specific pages
• Smart navigation - Previous disabled on page 1

Selection Persistence

• Selected files persist across page changes
• Checkboxes show correct state when returning to a page
• Clear selections when changing filters

Efficient Loading

• Loads 100 files per page
• Only fetches what's needed
• Fast page switching

Testing Checklist

After integration:

1. ✅ Status filter dropdown works
2. ✅ Can navigate pages with Previous/Next
3. ✅ Can jump to specific page
4. ✅ Selections persist across pages
5. ✅ Attribute filters work with pagination
6. ✅ Combining status + attribute filters works
7. ✅ Page resets to 1 when changing filters
8. ✅ No console errors

Quick Integration Script

If you want to apply these changes automatically, here's a sed script approach:

1. Back up current dashboard.html
2. Apply the HTML changes manually (status filter, pagination container)
3. Replace the JavaScript section with pagination-replacement.js content

Or manually:

1. Open templates/dashboard.html
2. Follow each step above
3. Test in browser
4. Refresh and verify

Comparison

Before (Infinite Scroll)

• ❌ Confusing "Load More" button
• ❌ All files stay in DOM (memory issues)
• ❌ Hard to jump to specific section
• ❌ Scroll position lost on filter change

After (Pagination)

• ✅ Clear page navigation
• ✅ Only 100 files in DOM at once
• ✅ Can jump to any page
• ✅ Clean state management
• ✅ Status filter dropdown for easy filtering