Crud tres
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo MVC</title>
<!--=====================================
PLUGINS DE CSS
======================================-->
<link href="vistas/css/bootstrap.min.css" rel="stylesheet">
<link href="vistas/css/buttons.bootstrap5.min.css" rel="stylesheet">
<script src="vistas/js/bootstrap.bundle.min.js"></script>
<script src="vistas/datatable/jquery-3.7.0.js"></script>
<script src="vistas/datatable/jquery.dataTables.min.js"></script>
<script src="vistas/datatable/dataTables.bootstrap5.min.js"></script>
<link href="vistas/datatable/dataTables.bootstrap5.min.css" rel="stylesheet">
</head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.26.10/dist/sweetalert2.all.min.js"></script>
<script>
$(document).ready(function() {
$('#solicitudtabla').DataTable({
"order": [
[4, "desc"]
],
pageLength: 4,
lengthMenu: [
[4, 10, 20, -1],
[4, 10, 20, 'Todos']
],
columnDefs: [{
orderable: false,
targets: -1
}],
dom: '<"row"<"col-sm-1 col-md-1"l><"col-sm-7 col-md-7"f><"col-sm-4 col-md-4"<"dt-buttons btn-group flex-wrap"B>>>t<"row"<"col-sm-12 col-md-3"p><"col-sm-12 col-md-7"i>>',
botones: [{
text: 'csv',
extend: 'csvHtml5',
},
{
texto: 'excel',
extensión: 'excelHtml5',
},
{
texto: 'pdf',
extensión: 'pdfHtml5',
},
]
});
});
</script>
<body>
<div class="container">
<input type="hidden" name="carpeta" id="inputCarpeta" value="C-01/2015">
<table id="solicitudtabla" class="table">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Carpeta</th>
<th>Registro</th>
<th>Solicitud</th>
<th>Fecha de Registro</th>
<th>Comentario</th>
<th>Fecha de Vencimiento</th>
<th>Estado</th>
<th>Resolvio</th>
<th>Fecha de Contesto</th>
</tr>
</thead>
<tbody id="tablaBody"></tbody>
</table>
<!-- Modal para la edición -->
<!-- Modal -->
<div class="modal fade" id="modalEditar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="formularioEditar">
<input type="hidden" name="id" id="editId">
<div class="form-group">
<label for="editRegistro">Resolvio:</label>
<input type="text" class="form-control" id="resolvio" name="resolvio">
</div>
<div class="form-group">
<label for="editRegistro">Resolvio:</label>
<input type="date" class="form-control" id="f_contesto" name="f_contesto">
</div>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script>
const tablaBody = document.getElementById('tablaBody');
const modalEditar = document.getElementById('modalEditar');
const formularioEditar = document.getElementById('formularioEditar');
datos=[];
// Variable para almacenar temporalmente el id
let idSeleccionado;
optenerDatos();//Optemos los datos-const datos = [{id: 1, carpeta: 'Registro 1', registro: 'a', solicitud: 2, f_registro: 'Registro 2', comentario: 'a', f_vence: 'a', Estado: 'a', resolvio: 'a', f_contesto: 'f_contesto'}];
function optenerDatos() {
// Obtener el valor del input
var valorCarpeta = document.getElementById("inputCarpeta").value;
// Imprimir el valor en la consola
console.log("Valor de la carpeta:", valorCarpeta);
//const datos = [{id: 1, carpeta: 'Registro 1', registro: 'a', solicitud: 2, f_registro: 'Registro 2', comentario: 'a', f_vence: 'a', Estado: 'a', resolvio: 'a', f_contesto: 'f_contesto'}];
fetch(`http://localhost/3-MVC-SITE-v5-SOLICITUDES/EJERCICIOS-COMPONENTES/componentes/0-solicitud_tabla.php?carpeta=${valorCarpeta}`)
.then(res => res.json())
.then(data => {
console.log(data.status);
datos=data.result;
pintarTabla(datos);//Pintamos la tabla
});
}
function pintarTabla(datos) {
let tablaHTML = '';
for (let dato of datos) {
tablaHTML += `
<tr>
<td>${dato.id}</td>
<td>${dato.carpeta}</td>
<td>${dato.registro || ''}</td>
<td>${dato.solicitud || ''}</td>
<td>${dato.f_registro || ''}</td>
<td>${dato.comentario || ''}</td>
<td>${dato.f_vence || ''}</td>
<td>
<button class="btn btn-primary" onclick="abrirModalEditar(${dato.id})">Editar</button>
</td>
<td>${dato.resolvio || ''}</td>
<td>${dato.f_contesto || ''}</td>
</tr>
`;
};
// Insertar el HTML generado en el documento
tablaBody.innerHTML = tablaHTML;
}
function abrirModalEditar(idEditar) {
//Verificamos que se ejecute la funcion con el valor id console.log(idEditar);
//Transformamos id a string
const id = idEditar.toString();
// Buscar el dato correspondiente al ID
const dato = datos.find(item => item.id === id);//console.log(dato);
idSeleccionado=dato.id;
// Mostrar la modal
const modalElement = document.getElementById("modalEditar");
const modal = new bootstrap.Modal(modalElement);
modal.show();
}
formularioEditar.addEventListener('submit', function(event) {
event.preventDefault();
//obtenemos los datos del formulario
const datosFormulario = new FormData(document.getElementById('formularioEditar'));
console.log([...datosFormulario.entries()]);
// console.log("le pegue",dato.id);
// Añade el id a los datos del formulario antes de enviarlo
datosFormulario.append('id', idSeleccionado);
fetch(`http://localhost-solicitud`,{
method:'POST',
body:datosFormulario,
})
.then(res=>res.json())
.then(data=>{
console.log(data);
})
.catch(error => {
console.error('Error:', error);
// Manejar el error
});
// Restablece el formulario y cierra la modal
formularioEditar.reset();
$(modalEditar).modal('hide');
});
</script>
</body>
</html>
Comentarios
Publicar un comentario