2-LOGICA DE PAGINACION JS-generarPaginacion
Explicación de generarPaginacion
La función generarPaginacion se encarga de crear y mostrar los botones de paginación en la interfaz de usuario. Estos botones permiten al usuario navegar entre diferentes páginas de datos en la tabla. Aquí está el código nuevamente, seguido de una explicación detallada de cada parte:
// Función para generar la paginación
function generarPaginacion(totalPaginas) {
const paginationDiv = document.getElementById('pagination');//Seleccionar el Contenedor de Paginación:
paginationDiv.innerHTML = ''; // Limpiar el contenido previo de la paginación
// Crear un botón por cada página
for (let i = 1; i <= totalPaginas; i++) {
const boton = document.createElement('button'); // Crear un botón
boton.classList.add('btn', 'btn-primary', 'me-2'); // Añadir clases de Bootstrap para estilo
boton.innerText = i; // Establecer el número de página como texto del botón
boton.addEventListener('click', function() { // Añadir evento de clic al botón
paginaActual = i; // Establecer la página actual a la que se ha hecho clic
mostrarTabla(datosGlobales); // Mostrar los datos de la página actual
});
paginationDiv.appendChild(boton); // Añadir el botón al contenedor de paginación
}
}
Paso a Paso
Seleccionar el Contenedor de Paginación:
const paginationDiv = document.getElementById('pagination');
Se selecciona el elemento HTML con el id
pagination, que es donde se colocarán los botones de paginación.2-Limpiar el Contenedor de Paginación:
paginationDiv.innerHTML = '';
Se limpia el contenido previo del contenedor para asegurarse de que no se acumulen botones de paginación de llamadas anteriores a la función.
3-Crear Botones de Paginación:
// Crear un botón por cada página
for (let i = 1; i <= totalPaginas; i++) {
const boton = document.createElement('button'); // Crear un botón
boton.classList.add('btn', 'btn-primary', 'me-2'); // Añadir clases de Bootstrap para estilo
boton.innerText = i; // Establecer el número de página como texto del botón
boton.addEventListener('click', function() { // Añadir evento de clic al botón
paginaActual = i; // Establecer la página actual a la que se ha hecho clic
mostrarTabla(datosGlobales); // Mostrar los datos de la página actual
});
paginationDiv.appendChild(boton); // Añadir el botón al contenedor de paginación
}
- Bucle: Se recorre un bucle desde
1hastatotalPaginas, creando un botón por cada página. - Crear Botón: Se crea un nuevo elemento
buttonpara cada página. - Estilo del Botón: Se añaden clases de Bootstrap (
btn,btn-primary,me-2) para darle estilo al botón. - Texto del Botón: Se establece el número de página como el texto del botón (
innerText = i). - Evento de Clic: Se añade un evento de clic al botón:
- Cuando se hace clic en el botón, se actualiza la variable
paginaActualcon el número de la página correspondiente. - Se llama a la función
mostrarTabla(datosGlobales)para actualizar la tabla y mostrar los datos de la página seleccionada.
- Cuando se hace clic en el botón, se actualiza la variable
- Añadir Botón al Contenedor: Finalmente, se añade el botón al contenedor de paginación (
paginationDiv.appendChild(boton)).
- Bucle: Se recorre un bucle desde
Resumen
La función generarPaginacion crea dinámicamente botones de paginación basados en el número total de páginas (totalPaginas). Cada botón, al ser clicado, actualiza la página actual (paginaActual) y refresca la tabla para mostrar los datos correspondientes a esa página. Esto permite una navegación fácil y eficiente entre diferentes conjuntos de datos en la tabla.
const filasPorPagina = 5;
function mostrarTabla(datos) {
const searchInput = document.getElementById('searchInput').value.toLowerCase();
const tbody = document.querySelector(".tabla");
tbody.innerHTML = '';
// Filtrar los datos según el texto de búsqueda
const datosFiltrados = datos.filter(item => {
return Object.values(item).some(value =>
value.toString().toLowerCase().includes(searchInput)
);
});
// Calcular el total de páginas
const totalPaginas = Math.ceil(datosFiltrados.length / filasPorPagina);
// Calcular el inicio y el fin de los datos que se mostrarán en la página actual
const inicio = (paginaActual - 1) * filasPorPagina;
const fin = inicio + filasPorPagina;
// Obtener los datos que se mostrarán en la página actual
const datosParaMostrar = datosFiltrados.slice(inicio, fin);
// Agrega las filas a la tabla
for (let valor of datosParaMostrar) {
tbody.innerHTML += `
<tr>
<td>${valor.id}</td>
<td>${valor.nombre}</td>
<td>${valor.correo}</td>
<td>${valor.celular}</td>
<td>${valor.tel_oficina}</td>
<td>${valor.horario_disponible}</td>
<td>${valor.fecha_registro}</td>
<td>${valor.cedula_profesional}</td>
<td>${valor.domicilio}</td>
</tr>`;
}
// Genera la paginación
generarPaginacion(totalPaginas);
}
// Función para generar la paginación
function generarPaginacion(totalPaginas) {
const paginationDiv = document.getElementById('pagination');//Seleccionar el Contenedor de Paginación:
paginationDiv.innerHTML = ''; // Limpiar el contenido previo de la paginación
// Crear un botón por cada página
for (let i = 1; i <= totalPaginas; i++) {
const boton = document.createElement('button'); // Crear un botón
boton.classList.add('btn', 'btn-primary', 'me-2'); // Añadir clases de Bootstrap para estilo
boton.innerText = i; // Establecer el número de página como texto del botón
boton.addEventListener('click', function() { // Añadir evento de clic al botón
paginaActual = i; // Establecer la página actual a la que se ha hecho clic
mostrarTabla(datosGlobales); // Mostrar los datos de la página actual
});
paginationDiv.appendChild(boton); // Añadir el botón al contenedor de paginación
}
}
EJERCICIO COMPLETO:::::
<!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 y Búsqueda</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.tabla {
width: 100%;
margin: 20px 0;
}
#pagination {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-4">Tabla con Paginación y Búsqueda</h1>
<input type="text" id="searchInput" placeholder="Buscar..." class="form-control mb-4">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Correo</th>
<th>Celular</th>
<th>Tel Oficina</th>
<th>Horario Disponible</th>
<th>Fecha Registro</th>
<th>Cédula Profesional</th>
<th>Domicilio</th>
</tr>
</thead>
<tbody class="tabla"></tbody>
</table>
<div id="pagination"></div>
</div>
<script>
const datosGlobales = [
{
id: 1,
nombre: 'Juan Perez',
correo: 'juan.perez@example.com',
celular: '1234567890',
tel_oficina: '0987654321',
horario_disponible: 'Lunes a Viernes, 9am a 6pm',
fecha_registro: '2023-06-20',
cedula_profesional: '1234567',
domicilio: 'Calle Falsa 123'
},
{
id: 2,
nombre: 'Maria Gomez',
correo: 'maria.gomez@example.com',
celular: '0987654321',
tel_oficina: '1234567890',
horario_disponible: 'Lunes a Viernes, 8am a 5pm',
fecha_registro: '2023-06-21',
cedula_profesional: '2345678',
domicilio: 'Avenida Siempre Viva 742'
},
{
id: 3,
nombre: 'Pedro Martinez',
correo: 'pedro.martinez@example.com',
celular: '1122334455',
tel_oficina: '5566778899',
horario_disponible: 'Lunes a Viernes, 10am a 7pm',
fecha_registro: '2023-06-22',
cedula_profesional: '3456789',
domicilio: 'Calle Principal 456'
}
];
let paginaActual = 1;
function mostrarTabla(datos) {
const searchInput = document.getElementById('searchInput').value.toLowerCase();
const tbody = document.querySelector(".tabla");
tbody.innerHTML = '';
const datosFiltrados = datos.filter(item => {
return Object.values(item).some(value =>
value.toString().toLowerCase().includes(searchInput)
);
});
const totalPaginas = Math.ceil(datosFiltrados.length / filasPorPagina);
const inicio = (paginaActual - 1) * filasPorPagina;
const fin = inicio + filasPorPagina;
const datosParaMostrar = datosFiltrados.slice(inicio, fin);
for (let valor of datosParaMostrar) {
tbody.innerHTML += `
<tr>
<td>${valor.id}</td>
<td>${valor.nombre}</td>
<td>${valor.correo}</td>
<td>${valor.celular}</td>
<td>${valor.tel_oficina}</td>
<td>${valor.horario_disponible}</td>
<td>${valor.fecha_registro}</td>
<td>${valor.cedula_profesional}</td>
<td>${valor.domicilio}</td>
</tr>`;
}
generarPaginacion(totalPaginas);
}
function generarPaginacion(totalPaginas) {
const paginationDiv = document.getElementById('pagination');
paginationDiv.innerHTML = '';
for (let i = 1; i <= totalPaginas; i++) {
const boton = document.createElement('button');
boton.classList.add('btn', 'btn-primary', 'me-2');
boton.innerText = i;
boton.addEventListener('click', function() {
paginaActual = i;
mostrarTabla(datosGlobales);
});
paginationDiv.appendChild(boton);
}
}
document.getElementById('searchInput').addEventListener('input', function() {
paginaActual = 1;
mostrarTabla(datosGlobales);
});
const filasPorPagina = 5;
mostrarTabla(datosGlobales);
</script>
</body>
</html>
Comentarios
Publicar un comentario