0

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'])): ?>
                                                    &nbsp;
                                                <?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'])): ?>
                                                    &nbsp;
                                                <?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",
          });
        },
      });
    }
  });
});
1
  • Puedes intentar agregando un location.reload(); despues de cada accion, a lo que entiendo el problema es por que la configuracion de la tabla se destruye cada que realizas una accion
    – Lofex
    Commented el 2 sept. a las 22:09

1 respuesta 1

0

Actualizo la misma respuesta, agregue algunos comentarios en tu código para que te des una idea de que hacen algunas líneas:

 <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">

<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" action="javascript:void(0);">
               <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></tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>


   <!-- 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="index.js"></script>


   <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>

Tu código en JavaScript podría quedar de la siguiente forma:

let table;

$(document).ready(function () {
  table = $("#tablePersonal").DataTable({
    pageLength: 5,
    paggin: true,
    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",
      },
    ],
    columns: [
        { data: "id" , className: 'datosPersonal' },
        { data: "grado" , className: 'datosPersonal' },
        { data: "nombre" , className: 'datosPersonal' },
        { data: "matricula" , className: 'datosPersonal' },
        { data: "curp" , className: 'datosPersonal' },
        { data: "rfc" , className: 'datosPersonal' },
        { data: "numTelefonico" , className: 'datosPersonal' },
        { data: "compañia" , className: 'datosPersonal' },
        { data: "domicilio" , className: 'datosPersonal' },
        { data: "tipoSangre" , className: 'datosPersonal' },
        { data: "edad" , className: 'datosPersonal' },
        { data: "trozo" , className: 'datosPersonal' },
        {
            targets: 0,
            data: null,
            defaultContent: '',
            orderable: false,
            render: function( data, type, row ){
                return `<td>
                    <button type="button" value="${ data.id }" class="verPersonal btn btn-info"><i class="fa-regular fa-eye"></i></button>
                    <button type="button" value="${ data.id }" class="editarPersonal btn btn-success"><i class="fa-regular fa-pen-to-square"></i></button>
                    <button type="button" value="${ data.id }" class="eliminarPersonal btn btn-danger"><i class="fa-solid fa-trash-can"></i></button>
                </td>`;
            }
        },
    ],
    columnsDefs: [],
    ajax: {
        data: {
            param : 'show_data'
        },
        url: 'funciones.php',
        type: 'POST',
        dataType: 'json',
        complete: function( res ) {
            console.log( res );
        },
        error: function( err ) {
            console.log( err );
        },
    },
  });
});

$(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
              table.ajax.reload(); // Solo con esta linea vuelves a recargar los datos


            });
          }
        },
        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",
          });
        },
      });
    }
  });
});

// Pruebas la recarga con esta funcion
function rel(){
    table.ajax.reload();
}

Tu código Php de la siguiente forma:

<?php
    $query_run = [];
    if ( isset( $_POST['param'] ) && $_POST['param'] == 'show_data' ) {
        // Aqui realizas tu: select * from
        $query_run[] = [
            'id' => '1',
            'grado' => 'A',
            'nombre' => 'BB',
            'matricula' => 'CC',
            'curp' => 'ASDASDA',
            'rfc' => 'ASDASD1231qwseq',
            'numTelefonico' => '123',
            'compañia' => '123',
            'domicilio' => '123',
            'tipoSangre' => '123',
            'edad' => '123',
            'trozo' => '1232'
        ];
        $query_run = array_merge($query_run, $query_run);
        $query_run = array_merge($query_run, $query_run);
        $query_run = array_merge($query_run, $query_run);
        $query_run = array_merge($query_run, $query_run);
        $query_run = array_merge($query_run, $query_run);
        $query_run = array_merge($query_run, $query_run);
        $query_run = array_merge($query_run, $query_run);
        // Retornas los datos de tu tabla en formato JSON
        echo json_encode( [ "data" => $query_run ] , 1 );
    }
    
    if ( isset( $_POST['eliminar_Personal'] ) && isset( $_POST['personal_id'] ) ) {
        // Aqui realizas tu logica de eliminacion
        $query_run = array_pop( $query_run );
        echo json_encode( [ "data" => $query_run ] , 1 );
    }
?>

En tu código de Php solo deberías actualizar tu array principal / o en tu casa la consulta SQL, esto para que la tabla se actualice con la única linea de código que debes ocupar en JS.

1
  • ya agregue mas datos a mi pregunta, e intente realizar las respuestas de <form id="agregarPersonal" action="javascript:void(0);"></form> y location.reload();
    – VENEGAS L
    Commented el 2 sept. a las 22:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.