1-LOGICA DE PAGINACION JS-displayPage
<tbody id="tablaCarpetas">
<?php
$carpetas = $carpetasController->CarpetasVistaController();
foreach ($carpetas as $carpeta) {
echo "<tr>
<td>" . htmlspecialchars($carpeta['id']) . "</td>
<td>" . htmlspecialchars($carpeta['carpeta']) . "</td>
<td>" . htmlspecialchars($carpeta['procedimiento']) . "</td>
<td><button class='btn btn-primary' onclick='asignarCarpeta(" . htmlspecialchars($carpeta['id']) . ")'>Asignar</button></td>
<td>" . htmlspecialchars($carpeta['registro']) . "</td>
<td>" . htmlspecialchars($carpeta['fecha_asignacion']) . "</td>
<td>" . htmlspecialchars($carpeta['area']) . "</td>
<td>" . htmlspecialchars($carpeta['asignado']) . "</td>
<td>" . htmlspecialchars($carpeta['motivo']) . "</td>
<td>" . ($carpeta['activo'] ? "asignado" : "entregado") . "</td>
</tr>";
}
?>
</tbody>
// Paginación
const rowsPerPage = 5;
let currentPage = 1;
function displayPage(page) {
const start = (page - 1) * rowsPerPage; // Índice de inicio para la página actual
const end = start + rowsPerPage; // Índice de fin para la página actual
rows.forEach((row, index) => {
// Mostrar solo las filas que pertenecen a la página actual
row.style.display = (index >= start && index < end) ? '' : 'none';
});
// Habilitar o deshabilitar el botón de página anterior
document.getElementById('prevPage').parentElement.classList.toggle('disabled', page === 1);
// Habilitar o deshabilitar el botón de página siguiente
document.getElementById('nextPage').parentElement.classList.toggle('disabled', end >= rows.length);
}
// Evento para el botón de página anterior
document.getElementById('prevPage').addEventListener('click', function (e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
displayPage(currentPage);
}
});
// Evento para el botón de página posterior
document.getElementById('nextPage').addEventListener('click', function (e) {
e.preventDefault();
if ((currentPage * rowsPerPage) < rows.length) {
currentPage++;
displayPage(currentPage);
}
});
displayPage(currentPage);
displayPage
Esta función se encarga de mostrar una página específica de filas en una tabla,
ocultando las filas que no pertenecen a la página actual.
Aquí está el código nuevamente con comentarios:
Cálculo de Índices:
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
start: Índice del primer elemento que debe mostrarse en la página actual.end: Índice del último elemento que debe mostrarse en la página actual.2-Mostrar/Ocultar Filas:
rows.forEach((row, index) => {
row.style.display = (index >= start && index < end) ? '' : 'none';
});
Se recorren todas las filas (
rows) y se establecen su propiedad display para mostrar u ocultar las filas según su índice. Solo se muestran las filas cuyo índice esté
entre
start y end.3-Habilitar/Deshabilitar Botones de Navegación:
document.getElementById('prevPage').parentElement.classList.toggle('disabled', page === 1);
document.getElementById('nextPage').parentElement.classList.toggle('disabled', end >= rows.length);
Se habilitan o deshabilitan los botones de "anterior" y "siguiente" según la página actual. El botón de "anterior" se deshabilita en la primera página, y el botón de "siguiente" se deshabilita si no hay más filas para mostrar.
4-Evento para el Botón de Página Anterior:
document.getElementById('prevPage').addEventListener('click', function (e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
displayPage(currentPage);
}
});
Se añade un evento al botón de "anterior" para que, cuando se haga clic, se decremente
currentPage y se actualice la tabla llamando a displayPage.Diferencias con la Función generarPaginacion
Método de Mostrar/Ocultar Filas:
displayPage: Oculta o muestra directamente las filas medianterow.style.display.generarPaginacion: Reemplaza el contenido de la tabla con las filas correspondientes a la página actual.
Manejo de Botones de Navegación:
displayPage: Utiliza botones de "anterior" y "siguiente" y habilita/deshabilita estos botones según la página actual.generarPaginacion: Crea botones numerados para cada página y no tiene botones de "anterior" y "siguiente".
Cálculo de Índices:
- Ambas funciones calculan los índices de inicio y fin de manera similar, pero
displayPageaplica estos índices directamente a las filas existentes, mientras quegenerarPaginacionutiliza estos índices para extraer subconjuntos de datos y renderizar nuevas filas.
- Ambas funciones calculan los índices de inicio y fin de manera similar, pero
Interactividad:
displayPage: Actualiza la visibilidad de las filas al hacer clic en "anterior" o "siguiente".generarPaginacion: Actualiza el contenido de la tabla al hacer clic en un número de página específico.
Resumen
displayPagees más simple y directa, oculta/muestra filas según sea necesario y utiliza botones de navegación "anterior" y "siguiente".generarPaginaciones más flexible para casos en los que los datos se obtienen de forma dinámica o se necesita una paginación más visual con botones numerados.
Cada enfoque tiene sus ventajas dependiendo del caso de uso específico y de la preferencia de implementación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabla con Paginación</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.disabled {
pointer-events: none;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-4">Tabla de Carpetas</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Carpeta</th>
<th>Procedimiento</th>
<th>Acción</th>
<th>Registro</th>
<th>Fecha Asignación</th>
<th>Área</th>
<th>Asignado</th>
<th>Motivo</th>
<th>Estado</th>
</tr>
</thead>
<tbody id="tablaCarpetas">
<?php
// Arreglo de datos de carpetas
$carpetas = [
[
'id' => 1,
'carpeta' => 'Carpeta 1',
'procedimiento' => 'Procedimiento 1',
'registro' => 'Registro 1',
'fecha_asignacion' => '2023-06-20',
'area' => 'Área 1',
'asignado' => 'Juan Perez',
'motivo' => 'Motivo 1',
'activo' => true
],
[
'id' => 2,
'carpeta' => 'Carpeta 2',
'procedimiento' => 'Procedimiento 2',
'registro' => 'Registro 2',
'fecha_asignacion' => '2023-06-21',
'area' => 'Área 2',
'asignado' => 'Maria Gomez',
'motivo' => 'Motivo 2',
'activo' => false
],
[
'id' => 3,
'carpeta' => 'Carpeta 3',
'procedimiento' => 'Procedimiento 3',
'registro' => 'Registro 3',
'fecha_asignacion' => '2023-06-22',
'area' => 'Área 3',
'asignado' => 'Pedro Martinez',
'motivo' => 'Motivo 3',
'activo' => true
]
];
// Recorrer cada carpeta y crear una fila en la tabla con los datos
foreach ($carpetas as $carpeta) {
echo "<tr>
<td>" . htmlspecialchars($carpeta['id']) . "</td>
<td>" . htmlspecialchars($carpeta['carpeta']) . "</td>
<td>" . htmlspecialchars($carpeta['procedimiento']) . "</td>
<td><button class='btn btn-primary' onclick='asignarCarpeta(" . htmlspecialchars($carpeta['id']) . ")'>Asignar</button></td>
<td>" . htmlspecialchars($carpeta['registro']) . "</td>
<td>" . htmlspecialchars($carpeta['fecha_asignacion']) . "</td>
<td>" . htmlspecialchars($carpeta['area']) . "</td>
<td>" . htmlspecialchars($carpeta['asignado']) . "</td>
<td>" . htmlspecialchars($carpeta['motivo']) . "</td>
<td>" . ($carpeta['activo'] ? "asignado" : "entregado") . "</td>
</tr>";
}
?>
</tbody>
</table>
<!-- Contenedor para los botones de paginación -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" id="prevPage">Anterior</a>
</li>
<li class="page-item">
<a class="page-link" href="#" id="nextPage">Siguiente</a>
</li>
</ul>
</nav>
</div>
<script>
const rowsPerPage = 5; // Número de filas a mostrar por página
let currentPage = 1; // Página actual
const rows = document.querySelectorAll('#tablaCarpetas tr'); // Seleccionar todas las filas de la tabla
function displayPage(page) {
const start = (page - 1) * rowsPerPage; // Índice de inicio para la página actual
const end = start + rowsPerPage; // Índice de fin para la página actual
rows.forEach((row, index) => {
// Mostrar solo las filas que pertenecen a la página actual
row.style.display = (index >= start && index < end) ? '' : 'none';
});
// Habilitar o deshabilitar el botón de página anterior
document.getElementById('prevPage').parentElement.classList.toggle('disabled', page === 1);
// Habilitar o deshabilitar el botón de página siguiente
document.getElementById('nextPage').parentElement.classList.toggle('disabled', end >= rows.length);
}
// Evento para el botón de página anterior
document.getElementById('prevPage').addEventListener('click', function (e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--; // Decrementar el número de página
displayPage(currentPage); // Mostrar la página actualizada
}
});
// Evento para el botón de página siguiente
document.getElementById('nextPage').addEventListener('click', function (e) {
e.preventDefault();
if ((currentPage * rowsPerPage) < rows.length) {
currentPage++; // Incrementar el número de página
displayPage(currentPage); // Mostrar la página actualizada
}
});
displayPage(currentPage); // Mostrar la primera página al cargar
function asignarCarpeta(id) {
// Función para manejar la asignación de carpetas
alert('Carpeta ' + id + ' asignada');
}
</script>
</body>
</html>
Comentarios
Publicar un comentario