From 67780d5b7c43f22e4ec0c960fe6b3c703c63ffd5 Mon Sep 17 00:00:00 2001
From: unfr <staff@unfr.pw>
Date: Tue, 12 Aug 2025 10:15:05 +0200
Subject: [PATCH] pagination sur le filtrage

---
 autopost/server.js | 738 +++++++++++++++++++++++++--------------------
 1 file changed, 417 insertions(+), 321 deletions(-)

diff --git a/autopost/server.js b/autopost/server.js
index c54558f..a325641 100644
--- a/autopost/server.js
+++ b/autopost/server.js
@@ -238,25 +238,28 @@ autopostRouter.get('/', async (req, res) => {
 		  </div>
 		</div>
 
-		<nav aria-label="Page navigation" class="mb-4">
+		<nav id="pagination" aria-label="Page navigation" class="mb-4">
 		  <ul class="inline-flex items-center -space-x-px">
 			<li>
-			  ${ page > 1
-	  ? `<a href="/autopost/?page=${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
-	  : `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
-	}
+			  ${
+				page > 1
+				  ? `<a href="/autopost/?page=${page - 1}" data-page="${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
+				  : `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
+			  }
 			</li>
 			<li>
 			  <span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ${page} sur ${totalPages}</span>
 			</li>
 			<li>
-			  ${ page < totalPages
-	  ? `<a href="/autopost/?page=${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
-	  : `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
-	}
+			  ${
+				page < totalPages
+				  ? `<a href="/autopost/?page=${page + 1}" data-page="${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
+				  : `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
+			  }
 			</li>
 		  </ul>
 		</nav>
+
 		<div class="overflow-x-auto">
 		<table class="min-w-full border border-gray-700 shadow-lg rounded-lg overflow-hidden">
 		  <thead class="bg-gray-900 text-gray-300 uppercase text-sm">
@@ -449,146 +452,201 @@ autopostRouter.get('/', async (req, res) => {
 			<span id="toastMsg">Supprimé.</span>
 		  </div>
 	  
-	  <script>
-			function updateTable(rows) {
-			  var tbody = $("table tbody");
-			  tbody.empty();
-			  rows.forEach(function(row) {
+	<script>
+		// --- State ---
+		const INITIAL_PAGE = ${page};
+		const INITIAL_TOTAL_PAGES = ${totalPages};
+		const PAGE_LIMIT = ${limit};
+		
+		let currentPage = INITIAL_PAGE;
+		let currentTotalPages = INITIAL_TOTAL_PAGES;
+		let activeFilter = null;   // number | null
+		let activeQuery  = '';     // string
+		
+		
+		// --- Rendering: table ---
+		function updateTable(rows) {
+			var tbody = $('table tbody');
+			tbody.empty();
+		
+			rows.forEach(function(row) {
 				var statusText = '';
 				var statusClass = '';
+		
 				switch (parseInt(row.status)) {
-				  case 0:
-					statusText = 'EN ATTENTE';
-					statusClass = 'bg-cyan-500 text-black font-bold';
-					break;
-				  case 1:
-					statusText = 'ENVOI TERMINÉ';
-					statusClass = 'bg-green-300 text-black font-bold';
-					break;
-				  case 2:
-					statusText = 'ERREUR';
-					statusClass = 'bg-red-300 text-black font-bold';
-					break;
-				  case 3:
-					statusText = 'DEJA DISPONIBLE';
-					statusClass = 'bg-pink-300 text-black font-bold';
-					break;
-				  case 4:
-					statusText = 'EN COURS';
-					statusClass = 'bg-yellow-300 text-black font-bold';
-					break;
-				  default:
-					statusText = 'INCONNU';
+					case 0:
+						statusText = 'EN ATTENTE';
+						statusClass = 'bg-cyan-500 text-black font-bold';
+						break;
+					case 1:
+						statusText = 'ENVOI TERMINÉ';
+						statusClass = 'bg-green-300 text-black font-bold';
+						break;
+					case 2:
+						statusText = 'ERREUR';
+						statusClass = 'bg-red-300 text-black font-bold';
+						break;
+					case 3:
+						statusText = 'DEJA DISPONIBLE';
+						statusClass = 'bg-pink-300 text-black font-bold';
+						break;
+					case 4:
+						statusText = 'EN COURS';
+						statusClass = 'bg-yellow-300 text-black font-bold';
+						break;
+					default:
+						statusText = 'INCONNU';
 				}
 		
 				var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
-					  ? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="'+row.nom+'">Log</a>' 
-					  : '';
-				var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
-					  ? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="'+row.nom+'">Mediainfo</a>' 
-					  : '';
-				var dlLink = (parseInt(row.status) === 1) 
-					? ' | <a href="/autopost/dl?name='+encodeURIComponent(row.nom)+'" class="dl-link text-blue-400 hover:underline">DL</a>' 
+					? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Log</a>'
 					: '';
 		
-				var tr = '<tr id="row-'+row.id+'" data-status="'+row.status+'" class="odd:bg-gray-800 even:bg-gray-700">'+
-						   '<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">'+row.nom+'</td>'+
-						   '<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap '+statusClass+'">'+statusText+'</td>'+
-						   '<td class="px-4 py-2 border border-gray-700">'+row.id+'</td>'+
-						   '<td class="px-4 py-2 border border-gray-700">'+
-							 '<a href="#" class="edit-link text-blue-400 hover:underline" data-id="'+row.id+'" data-status="'+row.status+'">Editer</a> | '+
-							 '<a href="#" class="delete-link text-blue-400 hover:underline" data-id="'+row.id+'">Supprimer</a>'+
-							 logLink+mediainfoLink+dlLink+
-						   '</td>'+
-						 '</tr>';
-				tbody.append(tr);
-			  });
-			}
+				var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
+					? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Mediainfo</a>'
+					: '';
 		
-		  $(document).ready(function(){
-				let searchTimer = null;
-			  $("#searchInput").on("keyup", function() {
-				clearTimeout(searchTimer); // annule le timer précédent
-			  
-				let q = $(this).val();
-			  
-				searchTimer = setTimeout(function() {
-				  $.ajax({
-					url: '/autopost/search',
-					type: 'GET',
-					data: { q: q },
-					dataType: 'json',
-					success: function(data) {
-					  updateTable(data);
-					  $(".filter-card").removeClass("ring-4 ring-white/40"); 
-					  toggleShowAllButton(); 
-					},
-					error: function(jqXHR, textStatus, errorThrown) {
-					  // On ignore l'erreur si la requête a été annulée volontairement
-					  if (textStatus !== "abort") {
+				var dlLink = (parseInt(row.status) === 1)
+					? ' | <a href="/autopost/dl?name=' + encodeURIComponent(row.nom) + '" class="dl-link text-blue-400 hover:underline">DL</a>'
+					: '';
+		
+				var tr =
+					'<tr id="row-' + row.id + '" data-status="' + row.status + '" class="odd:bg-gray-800 even:bg-gray-700">' +
+						'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + row.nom + '</td>' +
+						'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ' + statusClass + '">' + statusText + '</td>' +
+						'<td class="px-4 py-2 border border-gray-700">' + row.id + '</td>' +
+						'<td class="px-4 py-2 border border-gray-700">' +
+							'<a href="#" class="edit-link text-blue-400 hover:underline" data-id="' + row.id + '" data-status="' + row.status + '">Editer</a> | ' +
+							'<a href="#" class="delete-link text-blue-400 hover:underline" data-id="' + row.id + '">Supprimer</a>' +
+							logLink + mediainfoLink + dlLink +
+						'</td>' +
+					'</tr>';
+		
+				tbody.append(tr);
+			});
+		}
+		
+		
+		// --- Rendering: pagination ---
+		function renderPaginationHTML(page, totalPages) {
+			var prevDisabled = page <= 1;
+			var nextDisabled = page >= totalPages;
+		
+			var h = '';
+			h += '<ul class="inline-flex items-center -space-x-px">';
+			h +=   '<li>';
+			if (prevDisabled) {
+				h += '<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>';
+			} else {
+				h += '<a href="/autopost/?page=' + (page - 1) + '" data-page="' + (page - 1) + '" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>';
+			}
+			h +=   '</li>';
+			h +=   '<li><span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ' + page + ' sur ' + totalPages + '</span></li>';
+			h +=   '<li>';
+			if (nextDisabled) {
+				h += '<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>';
+			} else {
+				h += '<a href="/autopost/?page=' + (page + 1) + '" data-page="' + (page + 1) + '" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>';
+			}
+			h +=   '</li>';
+			h += '</ul>';
+		
+			return h;
+		}
+		
+		function updatePagination(page, totalPages) {
+			$('#pagination').html(renderPaginationHTML(page, totalPages));
+		}
+		
+		
+		// --- Data loading ---
+		function loadPage(p) {
+			const targetPage = Math.max(1, parseInt(p, 10) || 1);
+		
+			const isFilter = activeFilter !== null;
+			const url = isFilter ? '/autopost/filter' : '/autopost/search';
+			const data = isFilter
+				? { status: activeFilter, page: targetPage, limit: PAGE_LIMIT }
+				: { q: activeQuery || '', page: targetPage, limit: PAGE_LIMIT };
+		
+			$.ajax({
+				url: url,
+				type: 'GET',
+				data: data,
+				dataType: 'json',
+				success: function(resp) {
+					updateTable(resp.rows);
+					currentPage = resp.page;
+					currentTotalPages = resp.totalPages;
+					updatePagination(currentPage, currentTotalPages);
+				},
+				error: function(jqXHR, textStatus, errorThrown) {
+					if (textStatus !== 'abort') {
 						console.error('Erreur AJAX :', textStatus, errorThrown);
-						alert("Erreur lors de la recherche.");
-					  }
+						alert('Erreur lors du chargement de la page.');
 					}
-				  });
-				}, 300); // 300ms après la dernière frappe
-			  });
-
-			  
-			  function toggleShowAllButton() {
-				if ($(".filter-card.ring-4").length === 0) {
+				}
+			});
+		}
+		
+		
+		// --- DOM bindings ---
+		$(document).ready(function() {
+			// Recherche
+			let searchTimer = null;
+			$('#searchInput').on('keyup', function() {
+				clearTimeout(searchTimer);
+				let q = $(this).val();
+		
+				searchTimer = setTimeout(function() {
+					activeQuery = q || '';
+					activeFilter = null; // on sort du mode filtre
+					$('.filter-card').removeClass('ring-4 ring-white/40');
+					loadPage(1);         // charge page 1 avec pagination AJAX
+					toggleShowAllButton();
+				}, 300);
+			});
+		
+			// Pagination: intercepter et paginer en AJAX (liste, recherche ou filtre)
+			$(document).on('click', '#pagination a[data-page]', function(e) {
+				e.preventDefault();
+				const p = parseInt($(this).data('page'), 10);
+				if (!isNaN(p)) loadPage(p);
+			});
+		
+			// Affichage/masquage du bouton "Tout afficher"
+			function toggleShowAllButton() {
+				if ($('.filter-card.ring-4').length === 0) {
 					$('#showAll').addClass('hidden');
 				} else {
 					$('#showAll').removeClass('hidden');
 				}
-			  }
+			}
 		
-	  
-			  // Filtrage par clic sur une card
-			  $(document).on("click", ".filter-card", function () {
-				  const status = parseInt($(this).data("status"), 10);
-			  
-				  $(".filter-card").removeClass("ring-4 ring-white/40");
-				  $(this).addClass("ring-4 ring-white/40");
-			  
-				  $.ajax({
-					  url: '/autopost/filter',
-					  type: 'GET',
-					  data: { status },
-					  dataType: 'json',
-					  success: function (data) {
-						  updateTable(data);
-						  toggleShowAllButton();
-					  },
-					  error: function () {
-						  alert("Erreur lors du filtrage.");
-					  }
-				  });
-			  });
-			  
-			  
-			  // Bouton tout afficher
-			  $(document).on("click", "#showAll", function () {
-				  $(".filter-card").removeClass("ring-4 ring-white/40");
-			  
-				  $.ajax({
-					  url: '/autopost/search',
-					  type: 'GET',
-					  data: { q: $("#searchInput").val() || "" },
-					  dataType: 'json',
-					  success: function (data) {
-						  updateTable(data);
-						  toggleShowAllButton();
-					  },
-					  error: function () {
-						  alert("Erreur lors du chargement des données.");
-					  }
-				  });
-			  });
-
+			// Filtrage par clic sur une card
+			$(document).on('click', '.filter-card', function() {
+				const status = parseInt($(this).data('status'), 10);
 		
-			  // Edition
-			  $(document).on("click", ".edit-link", function(e) {
+				$('.filter-card').removeClass('ring-4 ring-white/40');
+				$(this).addClass('ring-4 ring-white/40');
+		
+				activeFilter = status;
+				activeQuery = '';  // on sort du mode recherche
+				loadPage(1);       // page 1 du filtre
+				toggleShowAllButton();
+			});
+		
+			// Bouton tout afficher
+			$(document).on('click', '#showAll', function() {
+				$('.filter-card').removeClass('ring-4 ring-white/40');
+				activeFilter = null;
+				activeQuery = $('#searchInput').val() || '';
+				loadPage(1); // si recherche vide => liste complète, sinon recherche paginée
+				toggleShowAllButton();
+			});
+		
+			// Edition (ouvrir modale)
+			$(document).on('click', '.edit-link', function(e) {
 				e.preventDefault();
 				var releaseId = $(this).data('id');
 				var currentStatus = $(this).data('status');
@@ -596,198 +654,200 @@ autopostRouter.get('/', async (req, res) => {
 				$('#modalReleaseId').text(releaseId);
 				$('#statusSelect').val(currentStatus);
 				$('#editModal').removeClass('hidden').fadeIn();
-			  });
+			});
 		
-			  // Suppression
-			  // ---------- Confirmation de suppression (modale) ----------
-				var pendingDeleteId = null;
-			  
-				function openConfirmModal(id, name) {
-				  pendingDeleteId = id;
-				  $('#confirmItemName').text(name || ('ID ' + id));
-				  $('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
-				}
-			  
-				function closeConfirmModal() {
-				  $('#confirmDeleteModal').fadeOut(120, function() {
+			// ---------- Confirmation de suppression (modale) ----------
+			var pendingDeleteId = null;
+		
+			function openConfirmModal(id, name) {
+				pendingDeleteId = id;
+				$('#confirmItemName').text(name || ('ID ' + id));
+				$('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
+			}
+		
+			function closeConfirmModal() {
+				$('#confirmDeleteModal').fadeOut(120, function() {
 					$(this).addClass('hidden');
-				  });
-				  pendingDeleteId = null;
-				}
-			  
-				function showToast(msg) {
-				  $('#toastMsg').text(msg || 'Opération effectuée');
-				  $('#toast').removeClass('hidden').fadeIn(120);
-				  setTimeout(function() {
+				});
+				pendingDeleteId = null;
+			}
+		
+			function showToast(msg) {
+				$('#toastMsg').text(msg || 'Opération effectuée');
+				$('#toast').removeClass('hidden').fadeIn(120);
+				setTimeout(function() {
 					$('#toast').fadeOut(150, function() { $(this).addClass('hidden'); });
-				  }, 1800);
-				}
-			  
-				// Ouvrir la modale au clic sur "Supprimer"
-				$(document).on('click', '.delete-link', function(e) {
-				  e.preventDefault();
-				  var releaseId = $(this).data('id');
-				  // Récupère le nom dans la 1ère cellule de la ligne (évite d’ajouter data-name partout)
-				  var name = $(this).closest('tr').find('td:first').text().trim();
-				  openConfirmModal(releaseId, name);
-				});
-			  
-				// Boutons de la modale
-				$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
-				  closeConfirmModal();
-				});
-			  
-				// Clic sur l’overlay pour fermer
-				$('#confirmDeleteModal').on('click', function(e) {
-				  if (e.target === this) { closeConfirmModal(); }
-				});
-			  
-				// Accessibilité clavier: Esc = fermer, Enter = confirmer
-				$(document).on('keydown', function(e) {
-				  var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
-				  if (!modalVisible) return;
-				  if (e.key === 'Escape') { closeConfirmModal(); }
-				  if (e.key === 'Enter')  { $('#confirmDeleteBtn').click(); }
-				});
-			  
-				// Confirmer et supprimer via AJAX
-				$('#confirmDeleteBtn').on('click', function() {
-				  if (!pendingDeleteId) return;
-				  var releaseId = pendingDeleteId;
-			  
-				  $.ajax({
+				}, 1800);
+			}
+		
+			// Ouvrir la modale au clic sur "Supprimer"
+			$(document).on('click', '.delete-link', function(e) {
+				e.preventDefault();
+				var releaseId = $(this).data('id');
+				var name = $(this).closest('tr').find('td:first').text().trim();
+				openConfirmModal(releaseId, name);
+			});
+		
+			// Boutons de la modale
+			$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
+				closeConfirmModal();
+			});
+		
+			// Clic sur l’overlay pour fermer
+			$('#confirmDeleteModal').on('click', function(e) {
+				if (e.target === this) { closeConfirmModal(); }
+			});
+		
+			// Accessibilité clavier: Esc = fermer, Enter = confirmer
+			$(document).on('keydown', function(e) {
+				var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
+				if (!modalVisible) return;
+				if (e.key === 'Escape') { closeConfirmModal(); }
+				if (e.key === 'Enter')  { $('#confirmDeleteBtn').click(); }
+			});
+		
+			// Confirmer et supprimer via AJAX
+			$('#confirmDeleteBtn').on('click', function() {
+				if (!pendingDeleteId) return;
+				var releaseId = pendingDeleteId;
+		
+				$.ajax({
 					url: '/autopost/delete/' + releaseId,
 					type: 'POST',
 					success: function() {
-					  // Effet visuel sur la ligne puis suppression
-					  $('#row-' + releaseId).css('outline', '2px solid rgba(239,68,68,0.6)')
-											.fadeOut('300', function(){ $(this).remove(); });
-					  showToast('Enregistrement supprimé');
+						$('#row-' + releaseId)
+							.css('outline', '2px solid rgba(239,68,68,0.6)')
+							.fadeOut('300', function(){ $(this).remove(); });
+						showToast('Enregistrement supprimé');
 					},
 					error: function() {
-					  alert('Erreur lors de la suppression.');
+						alert('Erreur lors de la suppression.');
 					},
 					complete: function() {
-					  closeConfirmModal();
+						closeConfirmModal();
 					}
-				  });
 				});
+			});
 		
-			  // Affichage log
-			  $(document).on("click", ".log-link", function(e) {
+			// Affichage log
+			$(document).on('click', '.log-link', function(e) {
 				e.preventDefault();
-				var filename = $(this).data("filename");
+				var filename = $(this).data('filename');
 				$.ajax({
-				  url: '/autopost/log',
-				  type: 'GET',
-				  data: { name: filename },
-				  dataType: 'json',
-				  success: function(data) {
-					$("#logContent").html(data.content);
-					$("#logModal").removeClass('hidden').fadeIn();
-				  },
-				  error: function() {
-					alert("Erreur lors du chargement du fichier log.");
-				  }
+					url: '/autopost/log',
+					type: 'GET',
+					data: { name: filename },
+					dataType: 'json',
+					success: function(data) {
+						$('#logContent').html(data.content);
+						$('#logModal').removeClass('hidden').fadeIn();
+					},
+					error: function() {
+						alert('Erreur lors du chargement du fichier log.');
+					}
 				});
-			  });
+			});
 		
-			  // Affichage mediainfo
-			  $(document).on("click", ".mediainfo-link", function(e) {
+			// Affichage mediainfo
+			$(document).on('click', '.mediainfo-link', function(e) {
 				e.preventDefault();
-				var filename = $(this).data("filename");
+				var filename = $(this).data('filename');
 				$.ajax({
-				  url: '/autopost/mediainfo',
-				  type: 'GET',
-				  data: { name: filename },
-				  dataType: 'json',
-				  success: function(data) {
-					$("#mediainfoContent").text(data.content);
-					$("#mediainfoModal").removeClass('hidden').fadeIn();
-				  },
-				  error: function() {
-					alert("Erreur lors du chargement du fichier mediainfo.");
-				  }
+					url: '/autopost/mediainfo',
+					type: 'GET',
+					data: { name: filename },
+					dataType: 'json',
+					success: function(data) {
+						$('#mediainfoContent').text(data.content);
+						$('#mediainfoModal').removeClass('hidden').fadeIn();
+					},
+					error: function() {
+						alert('Erreur lors du chargement du fichier mediainfo.');
+					}
 				});
-			  });
+			});
 		
-			  // Fermeture modales
-			  $('.close').click(function(){
-				$(this).closest('.fixed').fadeOut(function(){
-				  $(this).addClass('hidden');
-				});
-			  });
-		
-			  $('.fixed').click(function(e) {
-				if (e.target === this) {
-				  $(this).fadeOut(function(){
+			// Fermeture modales (croix + clic overlay)
+			$('.close').click(function() {
+				$(this).closest('.fixed').fadeOut(function() {
 					$(this).addClass('hidden');
-				  });
-				}
-			  });
+				});
+			});
 		
-			  // Edition formulaire
-			  $('#editForm').submit(function(e){
+			$('.fixed').click(function(e) {
+				if (e.target === this) {
+					$(this).fadeOut(function() {
+						$(this).addClass('hidden');
+					});
+				}
+			});
+		
+			// Edition: submit
+			$('#editForm').submit(function(e) {
 				e.preventDefault();
 				var releaseId = $('#releaseId').val();
 				var newStatus = $('#statusSelect').val();
+		
 				$.ajax({
-				  url: '/autopost/edit/' + releaseId,
-				  type: 'POST',
-				  data: { status: newStatus },
-				  success: function(data) {
-					var statusText = '';
-					var statusClass = '';
-					switch(parseInt(newStatus)) {
-					  case 0:
-						statusText = 'EN ATTENTE';
-						statusClass = 'bg-cyan-500 text-black font-bold';
-						break;
-					  case 1:
-						statusText = 'ENVOI TERMINÉ';
-						statusClass = 'bg-green-300 text-black font-bold';
-						break;
-					  case 2:
-						statusText = 'ERREUR';
-						statusClass = 'bg-red-300 text-black font-bold';
-						break;
-					  case 3:
-						statusText = 'DEJA DISPONIBLE';
-						statusClass = 'bg-pink-300 text-black font-bold';
-						break;
-					  case 4:
-						statusText = 'EN COURS';
-						statusClass = 'bg-yellow-300 text-black font-bold';
-						break;
-					  default:
-						statusText = 'INCONNU';
+					url: '/autopost/edit/' + releaseId,
+					type: 'POST',
+					data: { status: newStatus },
+					success: function() {
+						var statusText = '';
+						var statusClass = '';
+						switch (parseInt(newStatus)) {
+							case 0:
+								statusText = 'EN ATTENTE';
+								statusClass = 'bg-cyan-500 text-black font-bold';
+								break;
+							case 1:
+								statusText = 'ENVOI TERMINÉ';
+								statusClass = 'bg-green-300 text-black font-bold';
+								break;
+							case 2:
+								statusText = 'ERREUR';
+								statusClass = 'bg-red-300 text-black font-bold';
+								break;
+							case 3:
+								statusText = 'DEJA DISPONIBLE';
+								statusClass = 'bg-pink-300 text-black font-bold';
+								break;
+							case 4:
+								statusText = 'EN COURS';
+								statusClass = 'bg-yellow-300 text-black font-bold';
+								break;
+							default:
+								statusText = 'INCONNU';
+						}
+		
+						var row = $('#row-' + releaseId);
+						row.find('.status-text')
+							.removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
+							.addClass(statusClass)
+							.text(statusText);
+		
+						$('#editModal').fadeOut(function() {
+							$(this).addClass('hidden');
+						});
+					},
+					error: function() {
+						alert('Erreur lors de la mise à jour.');
 					}
-					var row = $('#row-' + releaseId);
-					row.find('.status-text')
-					  .removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
-					  .addClass(statusClass)
-					  .text(statusText);
-					$('#editModal').fadeOut(function(){
-					  $(this).addClass('hidden');
-					});
-				  },
-				  error: function() {
-					alert("Erreur lors de la mise à jour.");
-				  }
 				});
-			  });
 			});
-			// Bouton copie du JSON
-			  document.getElementById("copyMediainfoBtn").addEventListener("click", function () {
-				const content = document.getElementById("mediainfoContent").textContent;
-				navigator.clipboard.writeText(content).then(() => {
-				  this.textContent = "✅ Copié !";
-				  setTimeout(() => this.textContent = "📋 Copier JSON", 2000);
-				}).catch(err => {
-				  alert("Erreur lors de la copie : " + err);
-				});
-			  });
-		</script>
+		});
+		
+		// --- Copy Mediainfo JSON button ---
+		document.getElementById('copyMediainfoBtn').addEventListener('click', function() {
+			const content = document.getElementById('mediainfoContent').textContent;
+			navigator.clipboard.writeText(content).then(() => {
+				this.textContent = '✅ Copié !';
+				setTimeout(() => this.textContent = '📋 Copier JSON', 2000);
+			}).catch(function(err) {
+				alert('Erreur lors de la copie : ' + err);
+			});
+		});
+	  </script>
 	</body>
 	</html>
 	`;
@@ -800,20 +860,37 @@ autopostRouter.get('/', async (req, res) => {
 
 // --------------------------- Recherche -----------------------------
 autopostRouter.get('/search', async (req, res) => {
-	const q = req.query.q || "";
-	const searchQuery = "%" + q + "%";
-	try {
-		const [rows] = await db.query(
-			`SELECT nom, status, id FROM \`${config.DB_TABLE}\` WHERE nom LIKE ? ORDER BY id DESC LIMIT 500`,
-			[searchQuery]
-		);
-		res.json(rows);
-	} catch (err) {
-		console.error(err.message);
-		res.status(500).json({ error: "Erreur lors de la requête." });
-	}
+  const q = req.query.q || "";
+  const page = parseInt(req.query.page, 10) || 1;
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const offset = (page - 1) * limit;
+  const searchQuery = `%${q}%`;
+
+  try {
+	const [countRows] = await db.query(
+	  `SELECT COUNT(*) AS total FROM \`${config.DB_TABLE}\` WHERE nom LIKE ?`,
+	  [searchQuery]
+	);
+	const total = countRows[0].total;
+	const totalPages = Math.max(1, Math.ceil(total / limit));
+
+	const [rows] = await db.query(
+	  `SELECT nom, status, id
+	   FROM \`${config.DB_TABLE}\`
+	   WHERE nom LIKE ?
+	   ORDER BY (status = 2) DESC, id DESC
+	   LIMIT ? OFFSET ?`,
+	  [searchQuery, limit, offset]
+	);
+
+	res.json({ rows, page, limit, total, totalPages });
+  } catch (err) {
+	console.error(err.message);
+	res.status(500).json({ error: "Erreur lors de la requête." });
+  }
 });
 
+
 // --------------------------- Log -----------------------------
 autopostRouter.get('/log', (req, res) => {
   const filename = req.query.name;
@@ -990,22 +1067,41 @@ autopostRouter.post('/delete/:id', async (req, res) => {
 	}
 });
 
-// --------------------------- Fultrage -----------------------------
+// --------------------------- Filtrage -----------------------------
 autopostRouter.get('/filter', async (req, res) => {
-	const status = req.query.status;
-	if (status === undefined) {
-		return res.status(400).json({ error: "Status non fourni." });
-	}
-	try {
-		const [rows] = await db.query(
-			`SELECT nom, status, id FROM \`${config.DB_TABLE}\` WHERE status = ? ORDER BY id DESC LIMIT 500`,
-			[status]
-		);
-		res.json(rows);
-	} catch (err) {
-		console.error(err.message);
-		res.status(500).json({ error: "Erreur lors de la requête." });
-	}
+  const status = Number.isFinite(parseInt(req.query.status, 10))
+	? parseInt(req.query.status, 10)
+	: null;
+  if (status === null) {
+	return res.status(400).json({ error: "Status non fourni." });
+  }
+
+  const page = parseInt(req.query.page, 10) || 1;
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const offset = (page - 1) * limit;
+
+  try {
+	const [countRows] = await db.query(
+	  `SELECT COUNT(*) AS total FROM \`${config.DB_TABLE}\` WHERE status = ?`,
+	  [status]
+	);
+	const total = countRows[0].total;
+	const totalPages = Math.max(1, Math.ceil(total / limit));
+
+	const [rows] = await db.query(
+	  `SELECT nom, status, id
+	   FROM \`${config.DB_TABLE}\`
+	   WHERE status = ?
+	   ORDER BY id DESC
+	   LIMIT ? OFFSET ?`,
+	  [status, limit, offset]
+	);
+
+	res.json({ rows, page, limit, total, totalPages });
+  } catch (err) {
+	console.error(err.message);
+	res.status(500).json({ error: "Erreur lors de la requête." });
+  }
 });
 
 // Redirection accès direct GET /edit/:id