carpeta/audiencia-exp.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabla con Búsqueda, Paginación y Exportación a Excel</title>
<!-- Bootstrap CSS para estilos de la página -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- SweetAlert2 CSS para alertas personalizadas -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
<div class="container">
<div class="row mt-4">
<!-- Botón para abrir el formulario modal -->
<div class="col-md-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#formularioModal">
Abrir Formulario
</button>
</div>
<!-- Campo de búsqueda -->
<div class="col-md-4">
<input type="text" id="searchInput" class="form-control" placeholder="Buscar...">
</div>
<!-- Botón para exportar a Excel -->
<div class="col-md-4">
<button id="exportButton" class="btn btn-success">Exportar a Excel</button>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<!-- Tabla para mostrar los datos -->
<table class="table" id="tabla-datos">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">Nombre</th>
<th scope="col">Correo</th>
<th scope="col">Celular</th>
<th scope="col">Tel</th>
<th scope="col">Horario</th>
<th scope="col">Fecha</th>
<th scope="col">Cédula</th>
<th scope="col">Domicilio</th>
</tr>
</thead>
<tbody class="tabla">
<!-- Aquí se mostrarán los datos cargados -->
</tbody>
</table>
<!-- Paginación -->
<div id="pagination" class="mt-3"></div>
</div>
</div>
</div>
<!-- Modal para el formulario -->
<div class="modal fade" id="formularioModal" tabindex="-1" aria-labelledby="formularioModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="formularioModalLabel">Formulario</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Formulario para ingresar datos -->
<form id="formulario">
<div class="mb-6 row mt-3">
<div class="col-1">
<label for="nombre" class="form-label">Nombre:</label>
</div>
<div class="col">
<input type="text" class="form-control" id="nombre" name="nombre" required>
</div>
<div class="col-1">
<label for="correo" class="form-label">Correo:</label>
</div>
<div class="col">
<input type="email" class="form-control" name="correo" id="correo">
</div>
</div>
<div class="mb-6 row">
<div class="col">
<label for="celular" class="form-label">Celular:</label>
<input type="tel" class="form-control" name="celular" id="celular">
</div>
<div class="col">
<label for="tel_oficina" class="form-label">Tel. Oficina:</label>
<input type="tel" class="form-control" name="tel_oficina" id="tel_oficina">
</div>
<div class="col">
<label for="horario_disponible" class="form-label">Horario Disponible:</label>
<input type="text" class="form-control" name="horario_disponible" id="horario_disponible">
</div>
<div class="col">
<label for="fecha_registro" class="form-label">Fecha de Registro:</label>
<input type="date" class="form-control" name="fecha_registro" id="fecha_registro" required>
</div>
<div class="col">
<label for="cedula_profesional" class="form-label">Cédula Profesional:</label>
<input type="text" class="form-control" name="cedula_profesional" id="cedula_profesional">
</div>
</div>
<div class="mb-6 row t-3">
<div class="col">
<label for="exampleFormControlTextarea1" class="form-label">Domicilio</label>
<textarea class="form-control" name="domicilio" id="domicilio" rows="3"></textarea>
</div>
<div class="col-1 text-center">
<button type="submit" class="btn btn-primary mt-5">Enviar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- XLSX JS -->
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script>
// Evento para manejar el envío del formulario
document.getElementById("formulario").addEventListener("submit", function(event) {
event.preventDefault(); // Evita que el formulario se envíe automáticamente
// Obtiene los valores de los campos del formulario
var formData = new FormData(document.getElementById("formulario"));
console.log("formData", [...formData.entries()]);
// Envía los datos al servidor utilizando Fetch API
fetch("http://localhost/0-MVC-SITE-v5-SOLICITUDES/EJERCICIOS-COMPONENTES/profesionistas.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data); // Muestra la respuesta del servidor en la consola
if (data.status === "success") {
// Mostrar alerta de éxito
Swal.fire({
title: '¡Guardado!',
text: 'Los datos se han guardado correctamente.',
icon: 'success',
confirmButtonText: 'OK',
timer: 1000, // Se cierra automáticamente después de 3 segundos
timerProgressBar: true
});
// Si la respuesta del servidor es exitosa, actualiza la tabla
traer();
// Cerrar la ventana modal
var modal = bootstrap.Modal.getInstance(document.getElementById('formularioModal'));
modal.hide();
// Resetear el formulario
document.getElementById("formulario").reset();
} else {
// Mostrar alerta de error
Swal.fire({
title: 'Error',
text: data.message,
icon: 'error',
confirmButtonText: 'OK',
timer: 1000, // Se cierra automáticamente después de 3 segundos
timerProgressBar: true
});
}
})
.catch(error => {
console.error("Error:", error);
Swal.fire({
title: 'Error',
text: 'Hubo un problema al guardar los datos.',
icon: 'error',
confirmButtonText: 'OK'
});
});
});
// Evento para cargar los datos al iniciar la página
window.addEventListener("load", traer);
let datosGlobales = [];
let paginaActual = 1;
// Evento para manejar la búsqueda
document.getElementById('searchInput').addEventListener('input', function() {
paginaActual = 1;
mostrarTabla(datosGlobales);
});
// Evento para manejar la exportación a Excel
document.getElementById('exportButton').addEventListener('click', exportToExcel);
// Función para traer los datos del servidor
function traer() {
fetch("http://localhost/0-MVC-SITE-v5-SOLICITUDES/EJERCICIOS-COMPONENTES/profesionistas.php")
.then(res => res.json())
.then(datos => {
datosGlobales = datos;
mostrarTabla(datosGlobales);
})
.catch(error => console.error("Error:", error));
}
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
}
}
/*
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.*/
// Función para exportar la tabla a un archivo Excel
function exportToExcel() {
const tabla = document.getElementById('tabla-datos');
const wb = XLSX.utils.table_to_book(tabla, {sheet: "Sheet1"});
XLSX.writeFile(wb, "TablaDatos.xlsx");
}
</script>
</body>
</html>
Comentarios
Publicar un comentario