Holaaa gente
Disculpen tengo un bug en mi sistema que estoy desarrollando, se trata de un crud, tengo una tabla donde aparecen mis datos, con las acciones de agregar, ver, editar y eliminar registros. Ahora tengo la tabla (datatable) donde tengo aprox 200 datos, paginados de 25 registros por vista y al agregar un dato más, o editarlo, no me respeta esa paginación sino que me muestran todos los registros y tengo que recargar la pagina para volverlo normalmente.
tengo mi header, tabla y footer por separado, y ya en el archivo donde esta la tabla los mando a llamar.
Header.php
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Estilos -->
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../library/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.5/css/buttons.dataTables.min.css">
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="../js/script.js"></script>
</head>
footer.php
<script src="../library/datatables.min.js"></script>
<script src="../library/bootstrap.bundle.min.js"></script>
<script src="../library/[email protected]"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.print.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
tabladatos
<?php
session_start();
// Verifica si ya se ha iniciado sesión
if (!isset($_SESSION['usuario'])) {
// Si ya ha iniciado sesión, redirige al usuario a la página del menú
header("Location: ../index.php");
exit; // Es importante salir del script después de redirigir
}
// El resto del código de la página de inicio de sesión continúa aquí
include("../database/conexion.php");
?>
<body>
<!-- Modal Agregar personal -->
<div class="modal fade" id="modalPersonal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title text-white" id="exampleModalLabel">Agregar Personal</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<!-------FORMULARIO-------->
<form id="agregarPersonal">
<div class="modal-body">
<div id="errorMessage" class="alert alert-warning d-none"></div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Grado</label>
<input type="text" name="grado" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Nombre</label>
<input type="text" name="nombre" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Matricula</label>
<input type="text" name="matricula" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">CURP</label>
<input type="text" name="curp" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">RFC</label>
<input type="text" name="rfc" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Núm. Telefonico</label>
<input type="number" name="numTelefonico" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Compañia</label>
<input type="text" name="compañia" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">IMEI</label>
<input type="text" name="imei" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Núm. de Serie</label>
<input type="text" name="numSerie" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Marca</label>
<input type="text" name="marca" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Modelo</label>
<input type="text" name="modelo" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Dirección Mac</label>
<input type="text" name="direccionMac" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Color</label>
<input type="text" name="color" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">IMSI</label>
<input type="text" name="imsi" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Domicilio</label>
<input type="text" name="domicilio" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Tipo de Sangre</label>
<input type="text" name="tipoSangre" class="input form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Edad</label>
<input type="number" name="edad" class="input form-control" />
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="trozo">Seleccione Trozo</label>
<select class="form-select form-select-md" aria-label=".form-select-lg example"
name="Atrozo" id="Atrozo">
<option value="VACÍO" selected>Seleccione un Trozo</option>
<option value="1ER. TROZO">1ER. TROZO</option>
<option value="2DO. TROZO">2DO. TROZO</option>
<option value="3ER. TROZO">3ER. TROZO</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
class="fa-solid fa-xmark"></i></button>
<button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
</div>
</form>
</div>
</div>
</div>
>
<!-------tabla-------->
<div class="container-flex-column container-fluid fd-flex border-top">
<div class="row p-3">
<div class="col-md-12 ">
<div class="card ">
<div class="card-header">
<h4>DATOS DEL PERSONAL
<button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
data-bs-toggle="modal" data-bs-target="#modalPersonal">
<i class="fa-solid fa-plus"></i>
</button>
</h4>
</div>
<div class="card-body table-responsive">
<table id="tablePersonal" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>N/P</th>
<th>Grado</th>
<th>Nombre</th>
<th>Matricula</th>
<th>CURP</th>
<th>RFC</th>
<th>Núm. Telefónico</th>
<th>Compañía</th>
<th>Domicilio</th>
<th>Tipo de Sangre</th>
<th>Edad</th>
<th>Trozo</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<?php
$pdo = mysqli_connect('localhost', 'root', '', 'sistema');
if (!$pdo) {
die('Error de conexión: ' . mysqli_connect_error());
}
$query = "SELECT * FROM personal";
$query_run = mysqli_query($pdo, $query);
if (mysqli_num_rows($query_run) > 0) {
foreach ($query_run as $personal) {
?>
<tr class="datosPersonal">
<td><?= htmlspecialchars($personal['id']) ?></td>
<td><?= htmlspecialchars($personal['grado']) ?></td>
<td><?= htmlspecialchars($personal['nombre']) ?></td>
<td><?= htmlspecialchars($personal['matricula']) ?></td>
<td><?= htmlspecialchars($personal['curp']) ?></td>
<td><?= htmlspecialchars($personal['rfc']) ?></td>
<td>
<?php if (empty($personal['numTelefonico'])): ?>
<?php else: ?>
<?= htmlspecialchars($personal['numTelefonico']) ?>
<?php endif; ?>
</td>
<td><?= htmlspecialchars($personal['compañia']) ?></td>
<td><?= htmlspecialchars($personal['domicilio']) ?></td>
<td><?= htmlspecialchars($personal['tipoSangre']) ?></td>
<td>
<?php if (empty($personal['edad'])): ?>
<?php else: ?>
<?= htmlspecialchars($personal['edad']) ?>
<?php endif; ?>
</td>
<td><?= htmlspecialchars($personal['trozo']) ?></td>
<td>
<button type="button" value="<?= htmlspecialchars($personal['id']) ?>"
class="verPersonal btn btn-info"><i class="fa-regular fa-eye"></i></button>
<button type="button" value="<?= htmlspecialchars($personal['id']) ?>"
class="editarPersonal btn btn-success"><i
class="fa-regular fa-pen-to-square"></i></button>
<button type="button" value="<?= htmlspecialchars($personal['id']) ?>"
class="eliminarPersonal btn btn-danger"><i
class="fa-solid fa-trash-can"></i></button>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<?php
include("../includes/footer.php");
?>
script.js
$(document).ready(function () {
$("#tablePersonal").DataTable({
pageLength: 25,
language: {
lengthMenu: "Mostrar _MENU_ registros",
zeroRecords: "No se encontraron resultados",
info: "Registros del _START_ al _END_ de un total de _TOTAL_ registros",
infoEmpty: "Mostrando registros del 0 al 0 de un total de 0 registros",
infoFiltered: "(filtrado de un total de _MAX_ registros)",
search: "Buscar:",
paginate: {
first: "Primero",
last: "Último",
next: "Siguiente",
previous: "Anterior",
},
processing: "Procesando...",
},
dom: '<"row"<"col-sm-12 col-md-4"l><"col-sm-12 col-md-4"B><"col-sm-12 col-md-4"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
buttons: [
{
extend: "excelHtml5",
text: '<i class="fas fa-file-excel" style="color: #28a745;"></i> ',
titleAttr: "Exportar a Excel",
className: "btn btn-success",
},
{
extend: "pdfHtml5",
text: '<i class="fas fa-file-pdf" style="color: #dc3545;"></i> ',
titleAttr: "Exportar a PDF",
className: "btn btn-danger",
},
{
extend: "print",
text: '<i class="fa fa-print" style="color: #007bff;"></i> ',
titleAttr: "Imprimir",
className: "btn btn-info",
},
],
});
});
//agregar Personal del modal
$(document).on("submit", "#agregarPersonal", function (e) {
e.preventDefault();
var formData = new FormData(this);
formData.append("agregar_Personal", true);
$.ajax({
type: "POST",
url: "funciones.php",
data: formData,
processData: false,
contentType: false,
success: function (response) {
var res = jQuery.parseJSON(response);
if (res.status == 422) {
Swal.fire({
title: "Error",
text: res.message,
icon: "error",
showConfirmButton: false, // Oculta el botón de aceptar
timer: 1000, // Tiempo en milisegundos antes de cerrar el mensaje (1000 ms = 1 segundos)
});
} else if (res.status == 200) {
$("#errorMessage").addClass("d-none");
$("#modalPersonal")
.modal("hide")
.on("hidden.bs.modal", function () {
$(".modal-backdrop").remove();
});
$("#agregarPersonal")[0].reset();
Swal.fire({
title: "Éxito",
text: "Alertamiento agregado correctamente.",
icon: "success",
timer: 1000, // Tiempo en milisegundos antes de que se cierre automáticamente
showConfirmButton: false,
});
$("#tablePersonal").load(location.href + " #tablePersonal");
}
},
});
});
//editar Personal modal
$(document).on("click", ".editarPersonal", function () {
var personal_id = $(this).val();
// alert(personal_id);
$.ajax({
type: "GET",
url: "funciones.php?personal_id=" + personal_id,
success: function (response) {
var res = jQuery.parseJSON(response);
if (res.status == 422) {
alert(res.message);
} else if (res.status == 200) {
$("#personal_id").val(res.data.id);
$("#grado").val(res.data.grado);
$("#nombre").val(res.data.nombre);
$("#matricula").val(res.data.matricula);
$("#curp").val(res.data.curp);
$("#rfc").val(res.data.rfc);
$("#numTelefonico").val(res.data.numTelefonico || "Vacío");
$("#compañia").val(res.data.compañia || "Vacío");
$("#imei").val(res.data.imei || "Vacío");
$("#numSerie").val(res.data.numSerie || "Vacío");
$("#marca").val(res.data.marca || "Vacío");
$("#modelo").val(res.data.modelo || "Vacío");
$("#direccionMac").val(res.data.direccionMac || "Vacío");
$("#color").val(res.data.color || "Vacío");
$("#imsi").val(res.data.imsi || "Vacío");
$("#domicilio").val(res.data.domicilio || "Vacío");
$("#tipoSangre").val(res.data.tipoSangre || "Vacío");
$("#edad").val(res.data.edad || "Vacío");
$("#trozo").val(res.data.trozo);
$("#modalEditarPersonal").modal("show");
}
},
});
});
//actualizar Personal modal
$(document).on("submit", "#ActualizarPersonal", function (e) {
e.preventDefault();
var formData = new FormData(this);
formData.append("Actualizar_Personal", true);
$.ajax({
type: "POST",
url: "funciones.php",
data: formData,
processData: false,
contentType: false,
success: function (response) {
var res = jQuery.parseJSON(response);
if (res.status == 422) {
// Mostrar mensaje de error usando SweetAlert2
Swal.fire({
title: "Error",
text: res.message,
icon: "error",
confirmButtonText: "Aceptar",
});
} else if (res.status == 200) {
// Mostrar mensaje de éxito usando SweetAlert2
Swal.fire({
title: "Éxito",
text: res.message,
icon: "success",
showConfirmButton: false, // Oculta el botón de aceptar
timer: 1000, // Tiempo en milisegundos antes de cerrar el mensaje (1000 ms = 1 segundos)
}).then(() => {
// Ocultar el modal y reiniciar el formulario
$("#modalEditarPersonal").modal("hide");
$("#ActualizarPersonal")[0].reset();
// Recargar la tabla
$("#tablePersonal").load(location.href + " #tablePersonal");
});
}
},
error: function () {
// Mostrar mensaje de error si la solicitud AJAX falla
Swal.fire({
title: "Error",
text: "Hubo un problema al procesar la solicitud.",
icon: "error",
confirmButtonText: "Aceptar",
});
},
});
});
//ver Personal modal
$(document).on("click", ".verPersonal", function () {
var personal_id = $(this).val();
// alert(elemento_id);
$.ajax({
type: "GET",
url: "funciones.php?personal_id=" + personal_id,
success: function (response) {
var res = jQuery.parseJSON(response);
if (res.status == 422) {
alert(res.message);
} else if (res.status == 200) {
$("#ver_personal_id").text(res.data.id);
$("#ver_grado").text(res.data.grado);
$("#ver_nombre").text(res.data.nombre);
$("#ver_matricula").text(res.data.matricula);
$("#ver_curp").text(res.data.curp);
$("#ver_rfc").text(res.data.rfc);
$("#ver_numTelefonico").text(res.data.numTelefonico || "Vacío");
$("#ver_compañia").text(res.data.compañia || "Vacío");
$("#ver_imei").text(res.data.imei || "Vacío");
$("#ver_numSerie").text(res.data.numSerie || "Vacío");
$("#ver_marca").text(res.data.marca || "Vacío");
$("#ver_modelo").text(res.data.modelo || "Vacío");
$("#ver_direccionMac").text(res.data.direccionMac || "Vacío");
$("#ver_color").text(res.data.color || "Vacío");
$("#ver_imsi").text(res.data.imsi || "Vacío");
$("#ver_domicilio").text(res.data.domicilio || "Vacío");
$("#ver_tipoSangre").text(res.data.tipoSangre || "Vacío");
$("#ver_edad").text(res.data.edad || "Vacío");
$("#ver_trozo").text(res.data.trozo || "Vacío");
$("#modalVerPersonal").modal("show");
}
},
});
});
//eliminar Personal por modal
$(document).on("click", ".eliminarPersonal", function (e) {
e.preventDefault();
var personal_id = $(this).val(); // Cambia esto según cómo estás pasando el ID
Swal.fire({
title: "¿Estás seguro?",
text: "Esta acción no se puede deshacer.",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Sí, eliminar",
cancelButtonText: "Cancelar",
}).then((result) => {
if (result.isConfirmed) {
// Si se confirma, proceder con la eliminación
$.ajax({
type: "POST",
url: "funciones.php",
data: {
eliminar_Personal: true,
personal_id: personal_id,
},
success: function (response) {
var res = jQuery.parseJSON(response);
if (res.status === 500) {
// Mostrar alerta de error
Swal.fire({
title: "Error",
text: res.message,
icon: "error",
confirmButtonText: "Aceptar",
});
} else {
// Mostrar alerta de éxito
Swal.fire({
title: "Éxito",
text: res.message,
icon: "success",
showConfirmButton: false, // Oculta el botón de aceptar
timer: 1000, // Tiempo en milisegundos antes de cerrar el mensaje (1000 ms = 1 segundos)
}).then(() => {
// Recargar la tabla después de la eliminación exitosa
$("#tablePersonal").load(location.href + " #tablePersonal");
});
}
},
error: function () {
// Mostrar alerta en caso de error de AJAX
Swal.fire({
title: "Error",
text: "Hubo un problema al realizar la solicitud.",
icon: "error",
confirmButtonText: "Aceptar",
});
},
});
}
});
});