implemented the functionality of the pagination during the search for a particular topic in the search bar

Author: I528989

site/assets/companies-table.js

@@ -1,4 +1,10 @@
 function setupSearch() {
+	// Pagination configuration
+	var RESULTS_PER_PAGE = 25; // between 20-30 as requested
+	var currentResultIndices = []; // indices of rows matching current search
+	var currentPage = 1;
+	var totalPages = 1;
+	var paginationContainer = null;
 	var table = document.querySelector('table#companies-table');
 
 	// ✅ Search Input Field
@@ -93,18 +99,132 @@ function setupSearch() {
 			searchMatches[+r.ref] = r;
 		});
 
-		// ✅ 5️⃣ Show/Hide Table Rows Based on Match
-		searchData.textData.forEach(function (company, index) {
-			var match = searchMatches[index];
+		// Build list of indices that match (or all if allMatch)
+		currentResultIndices = [];
+		searchData.textData.forEach(function(company, index) {
+			if (allMatch || searchMatches[index]) {
+				currentResultIndices.push(index);
+			}
+		});
+
+		// If showing all (no search) we do NOT paginate to avoid changing existing UX
+		if (allMatch) {
+			removePagination();
+			showRowsUnpaginated(currentResultIndices);
+			return;
+		}
+
+		setupOrUpdatePagination();
+		renderPage(1); // reset to first page on new / updated search
+	}
+
+	function showRowsUnpaginated(indices) {
+		// Show all listed indices, hide others
+		searchData.textData.forEach(function(company, index) {
 			var row = document.getElementById('company-row-' + index);
 			if (!row) return;
-			var rowMatch = row.nextElementSibling;
-			if (rowMatch && rowMatch.classList.contains('company-match')) {
-				rowMatch.parentNode.removeChild(rowMatch);
+			row.style.display = indices.indexOf(index) !== -1 ? '' : 'none';
+		});
+	}
+
+	function setupOrUpdatePagination() {
+		if (!paginationContainer) {
+			paginationContainer = document.createElement('div');
+			paginationContainer.id = 'pagination';
+			paginationContainer.style.margin = '1em 0';
+			paginationContainer.style.display = 'flex';
+			paginationContainer.style.flexWrap = 'wrap';
+			paginationContainer.style.gap = '4px';
+			// Insert after the search explanation (which is before the table)
+			var searchExplanation = document.getElementById('search-explanation');
+			searchExplanation.parentNode.insertBefore(paginationContainer, searchExplanation.nextSibling);
+		}
+		// Compute total pages
+		totalPages = Math.max(1, Math.ceil(currentResultIndices.length / RESULTS_PER_PAGE));
+		buildPaginationControls();
+	}
+
+	function removePagination() {
+		currentPage = 1;
+		totalPages = 1;
+		if (paginationContainer) {
+			paginationContainer.innerHTML = '';
+			paginationContainer.style.display = 'none';
+		}
+	}
+
+	function buildPaginationControls() {
+		if (!paginationContainer) return;
+		paginationContainer.style.display = totalPages > 1 ? 'flex' : 'none';
+		paginationContainer.innerHTML = '';
+
+		function makeButton(label, disabled, onClick, isActive) {
+			var btn = document.createElement('button');
+			btn.textContent = label;
+			btn.style.padding = '4px 8px';
+			btn.style.border = '1px solid #ccc';
+			btn.style.background = isActive ? '#0366d6' : '#f6f8fa';
+			btn.style.color = isActive ? '#fff' : '#000';
+			btn.style.cursor = disabled ? 'not-allowed' : 'pointer';
+			btn.disabled = !!disabled;
+			btn.addEventListener('click', function(e) {
+				e.preventDefault();
+				if (!disabled) onClick();
+			});
+			return btn;
+		}
+
+		// Previous button
+		paginationContainer.appendChild(makeButton('Prev', currentPage === 1, function() {
+			renderPage(currentPage - 1);
+		}));
+
+		// Decide page number buttons to show (simple strategy: show all if <= 10, else window around current)
+		var pagesToShow = [];
+		if (totalPages <= 10) {
+			for (var i = 1; i <= totalPages; i++) pagesToShow.push(i);
+		} else {
+			var windowSize = 3; // pages on each side
+			var start = Math.max(1, currentPage - windowSize);
+			var end = Math.min(totalPages, currentPage + windowSize);
+			if (start > 1) pagesToShow.push(1, '...');
+			for (var p = start; p <= end; p++) pagesToShow.push(p);
+			if (end < totalPages) pagesToShow.push('...', totalPages);
+		}
+
+		pagesToShow.forEach(function(p) {
+			if (p === '...') {
+				var span = document.createElement('span');
+				span.textContent = '...';
+				span.style.padding = '4px 8px';
+				paginationContainer.appendChild(span);
+			} else {
+				paginationContainer.appendChild(makeButton(String(p), false, function() { renderPage(p); }, p === currentPage));
 			}
-			row.style.display = (match || allMatch) ? '' : 'none';
-			row.classList.remove('has-match');
 		});
+
+		// Next button
+		paginationContainer.appendChild(makeButton('Next', currentPage === totalPages, function() {
+			renderPage(currentPage + 1);
+		}));
+	}
+
+	function renderPage(page) {
+		page = Math.min(Math.max(1, page), totalPages);
+		currentPage = page;
+		var start = (page - 1) * RESULTS_PER_PAGE;
+		var end = start + RESULTS_PER_PAGE;
+		var pageSet = {};
+		currentResultIndices.slice(start, end).forEach(function(idx) { pageSet[idx] = true; });
+
+		// Update rows
+		searchData.textData.forEach(function(company, index) {
+			var row = document.getElementById('company-row-' + index);
+			if (!row) return;
+			row.style.display = pageSet[index] ? '' : 'none';
+		});
+
+		buildPaginationControls(); // refresh controls to reflect current page
 	}
 
 	// ✅ Search Data Loading on Focus