feat: implementa paginação e contagem correta na lista de militantes

static/js/militantes.js

@@ -1,15 +1,115 @@
 console.log('Carregando script militantes.js...');
 
-// Variáveis globais para controle dos filtros
+// Variáveis globais para controle dos filtros e paginação
 let filtroAtual = 'todos';
 let filtroResponsabilidade = null;
 let filtroCelula = null;
+let currentPage = 1;
+let rowsPerPage = 20;
+let totalRows = 0;
+
+// Função para calcular o total de páginas
+function calculateTotalPages() {
+    const allRows = document.querySelectorAll('#militantesTable tbody tr');
+    const visibleRows = Array.from(allRows).filter(row => 
+        !row.hasAttribute('data-filtered-out')
+    );
+    totalRows = visibleRows.length;
+    return Math.ceil(totalRows / rowsPerPage);
+}
+
+// Função para atualizar o texto de contagem
+function updateCountText() {
+    const allRows = document.querySelectorAll('#militantesTable tbody tr');
+    const visibleRows = Array.from(allRows).filter(row => 
+        !row.hasAttribute('data-filtered-out')
+    );
+    totalRows = visibleRows.length;
+    const startIndex = (currentPage - 1) * rowsPerPage + 1;
+    const endIndex = Math.min(currentPage * rowsPerPage, totalRows);
+    
+    // Atualizar texto de contagem
+    document.getElementById('countMilitantes').textContent = 
+        `${startIndex}-${endIndex} de ${totalRows}`;
+}
+
+// Função para atualizar a paginação
+function updatePagination() {
+    const totalPages = calculateTotalPages();
+    const paginationUl = document.querySelector('.pagination');
+    const prevPage = document.getElementById('prevPage');
+    const nextPage = document.getElementById('nextPage');
+
+    // Limpar páginas existentes (exceto prev e next)
+    const pageItems = paginationUl.querySelectorAll('li:not(#prevPage):not(#nextPage)');
+    pageItems.forEach(item => item.remove());
+
+    // Adicionar novas páginas
+    for (let i = 1; i <= totalPages; i++) {
+        const li = document.createElement('li');
+        li.className = `page-item${i === currentPage ? ' active' : ''}`;
+        li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
+        li.addEventListener('click', (e) => {
+            e.preventDefault();
+            currentPage = i;
+            updateVisibleRows();
+            updatePagination();
+        });
+        paginationUl.insertBefore(li, nextPage);
+    }
+
+    // Atualizar estado dos botões prev/next
+    prevPage.classList.toggle('disabled', currentPage === 1);
+    nextPage.classList.toggle('disabled', currentPage === totalPages || totalPages === 0);
+
+    // Adicionar eventos aos botões prev/next
+    prevPage.onclick = (e) => {
+        e.preventDefault();
+        if (currentPage > 1) {
+            currentPage--;
+            updateVisibleRows();
+            updatePagination();
+        }
+    };
+
+    nextPage.onclick = (e) => {
+        e.preventDefault();
+        if (currentPage < totalPages) {
+            currentPage++;
+            updateVisibleRows();
+            updatePagination();
+        }
+    };
+
+    // Atualizar texto de contagem
+    updateCountText();
+}
+
+// Função para atualizar as linhas visíveis
+function updateVisibleRows() {
+    const allRows = document.querySelectorAll('#militantesTable tbody tr');
+    const visibleRows = Array.from(allRows).filter(row => 
+        !row.hasAttribute('data-filtered-out')
+    );
+    
+    const startIndex = (currentPage - 1) * rowsPerPage;
+    const endIndex = startIndex + rowsPerPage;
+
+    visibleRows.forEach((row, index) => {
+        if (index >= startIndex && index < endIndex) {
+            row.style.display = '';
+        } else {
+            row.style.display = 'none';
+        }
+    });
+
+    updateCountText();
+}
 
 // Função para filtrar militantes
 function filtrarMilitantes() {
     const searchTerm = document.getElementById('searchInput').value.toLowerCase();
     const rows = document.querySelectorAll('#militantesTable tbody tr');
-    let count = 0;
 
     rows.forEach(row => {
         let shouldShow = true;
@@ -39,19 +139,36 @@ function filtrarMilitantes() {
             }
         }
 
-        // Aplicar visibilidade
+        // Marcar linha como filtrada ou não
-        row.style.display = shouldShow ? '' : 'none';
+        if (shouldShow) {
-        if (shouldShow) count++;
+            row.removeAttribute('data-filtered-out');
+        } else {
+            row.setAttribute('data-filtered-out', '');
+            row.style.display = 'none';
+        }
     });
 
-    // Atualizar contador
+    // Resetar para a primeira página e atualizar paginação
-    document.getElementById('countMilitantes').textContent = count;
+    currentPage = 1;
+    updateVisibleRows();
+    updatePagination();
 }
 
 // Configurar eventos quando o DOM estiver carregado
 document.addEventListener('DOMContentLoaded', function() {
     console.log('DOM carregado, configurando eventos...');
     
+    // Configurar seletor de linhas por página
+    const rowsPerPageSelect = document.getElementById('rowsPerPage');
+    if (rowsPerPageSelect) {
+        rowsPerPageSelect.addEventListener('change', function() {
+            rowsPerPage = parseInt(this.value);
+            currentPage = 1;
+            updateVisibleRows();
+            updatePagination();
+        });
+    }
+
     // Configurar pesquisa
     const searchInput = document.getElementById('searchInput');
     if (searchInput) {
@@ -595,6 +712,10 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     });
+
+    // Inicializar paginação
+    updateVisibleRows();
+    updatePagination();
 });
 
 // Função para mostrar alertas

templates/listar_militantes.html

@@ -122,23 +122,35 @@
             </table>
         </div>
 
-        <div class="pagination-container">
+        <div class="pagination-container d-flex justify-content-between align-items-center">
             <div class="text-muted">
                 Mostrando <span id="countMilitantes">{{ militantes|length }}</span> militantes
             </div>
-            <nav aria-label="Navegação de páginas">
+            <div class="d-flex align-items-center gap-3">
-                <ul class="pagination mb-0">
+                <div class="d-flex align-items-center">
-                    <li class="page-item disabled" id="prevPage">
+                    <span class="me-2">Mostrar</span>
-                        <a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
+                    <select class="form-select form-select-sm me-2" id="rowsPerPage" style="width: auto;">
-                    </li>
+                        <option value="10">10</option>
-                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                        <option value="20" selected>20</option>
-                    <li class="page-item"><a class="page-link" href="#">2</a></li>
+                        <option value="50">50</option>
-                    <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <option value="100">100</option>
-                    <li class="page-item" id="nextPage">
+                    </select>
-                        <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
+                    <span>linhas</span>
-                    </li>
+                </div>
-                </ul>
+                <nav aria-label="Navegação de páginas">
-            </nav>
+                    <ul class="pagination mb-0">
+                        <li class="page-item disabled" id="prevPage">
+                            <a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
+                        </li>
+                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                        <li class="page-item"><a class="page-link" href="#">2</a></li>
+                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <li class="page-item" id="nextPage">
+                            <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
         </div>
     </div>
 </div>