1

Estoy en el proceso de mejora de una pagina donde por lo poco que es va muy lento al cargar (solo 180 registros).
La situación es que es una tabla donde recoge datos de diferentes tablas (trabajadores y citas) donde registro tiene tres opciones (enviar email, modificar y eliminar). En el caso de enviar email o modificar se abren modales para esto, donde carga los datos específicos y gestiona dicha acción.
El problema es que es muy lento ya que todo ello está con formato de Datatables (paginación, búsqueda, exportar) y cada vez que accedo a la página tarda bastante. Tengo claro que el tema de los modales es lo que relentiza ya que cuando elimino el código de los modales la carga bien.

Os paso el código de la tabla por si veis algún fallo garrafal que sea el problema en sí:

<table id="example1" class="table table-striped table-bordered table-hover">
    <thead>
    ****
    </thead>
    <tbody>
        <?php
        $contador = 0;
        $hoy = date('Y-m-d'); // Obtener la fecha actual

        foreach ($reconocimientos as $reconocimiento) {
            $contador = $contador + 1;
            $id_reconocimiento = $reconocimiento['id_reconocimiento'];
        ?>

        <tr>
            <td style="text-align: left"><?php echo $reconocimiento['nombre_tr']; ?> <?php if ($reconocimiento['activo_tr'] == 0) { ?>
                    <span class='badge badge-danger' style="font-size: 15px;">Baja</span>

                <?php
                                                                                        }
                ?>
            </td>
            <td style="text-align: left"><?php echo $reconocimiento['nombre_cen']; ?></td>
            <td style="text-align: <?php $reconocimiento['fecga_rm'] ?>
            </td>
            <td style="text-align: center"><?php $newdate = date("d-m-Y", strtotime($reconocimiento['caducidad_rm']));?> 
            </td>
                                           <td style="text-align: center;"><?php
                                          <?php echo $reconocimiento['vigente_rm'] ?>


            </td>
            <td style="text-align: left;"><?php echo $reconocimiento['cita_rm']          ?>


            </td> 
           
            <td style="text-align: center;"><?php echo $reconocimiento['solicitudcita_rm']     ?>

           </td>
            <td style="text-align: left"><?php echo $reconocimiento['anotaciones_rm']; ?></td>
            <td style="text-align: center">
                <div class="d-grid gap-2 d-md-block" role="group" aria-label="Basic mixed styles example">
                    <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" title="EDITAR RM" data-target="#modal-modificareconocimiento<?php echo $id_reconocimiento; ?>"><i class="bi bi-pencil-square"></i></button>
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" title="Email Cita RM" data-target="#modal-emailcita<?php echo $reconocimiento['id_reconocimiento']; ?>"><i class="fa-regular fa-envelope"></i></button>
                    <a href="../../app/controllers/reconocimientos/delete.php?id_reconocimiento=<?php echo $id_reconocimiento; ?>" class="btn btn-danger btn-sm btn-font-size" onclick="return confirm('¿Realmente desea eliminar el registro?')" title="Eliminar investigación"><i class="bi bi-trash-fill"></i> </a>
                </div>
            </td>
            <!--Modal modifica rm-->
            <div class="modal fade" id="modal-modificareconocimiento<?php echo $id_reconocimiento; ?>" tabindex="-1" aria-labelledby="exampleModalLabel">
                <?php include('../../app/controllers/reconocimientos/datos_reconocimiento.php'); ?>
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header" style="background-color:gold">
                            <h5 class="modal-title" id="modal-modificacita" style="color: black;"><i class="bi bi-person-lines-fill"></i>Recon. Médico - <?php echo $reconocimientos_dato['nombre_tr'] ?> -

                                <?php $reconocimientos_dato['activo_tr'];
                                if ($reconocimientos_dato['activo_tr'] == 0) { ?>
                                    <span class='badge badge-danger'>
                                        <h4>BAJA</h4>
                                    </span>
                                <?php }
                                ?>

                            </h5>
                            <button type="button" class="close" style="color:black;" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <form action="../../app/controllers/reconocimientos/update.php" method="post" enctype="multipart/form-data">

                                <div class="row">
                                    <input type="text" name="id_reconocimiento" value="<?php echo $reconocimientos_dato['id_reconocimiento'] ?>" class="form-control" hidden>


                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">Trabajador</label>
                                            <select name="trabajador_rm" id="" class="form-control">
                                                <?php
                                                foreach ($trabajadores as $trabajador) {
                                                    $trabajador_tabla = $trabajador['nombre_tr'];
                                                    $id_trabajador = $trabajador['id_trabajador']; ?>
                                                    <option value="<?php echo $id_trabajador; ?>" <?php if ($trabajador_tabla == $trabajador_rm) { ?> selected="selected" <?php } ?>>
                                                        <?php echo $trabajador_tabla; ?>
                                                    </option>
                                                <?php
                                                }
                                                ?>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Fecha Reconocimiento</label>
                                                <input type="date" name="fecha_rm" value="<?php echo $reconocimientos_dato['fecha_rm'] ?>" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Valido hasta</label>
                                                <input type="date" name="caducidad_rm" value="<?php echo $reconocimientos_dato['caducidad_rm'] ?>" class="form-control">
                                            </div>

                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="vigente_rm" id="flexRadioDefault3" value="1" <?php if ($reconocimientos_dato['vigente_rm'] == "1") {
                                                                                                                                                    echo 'Checked';
                                                                                                                                                } ?>>
                                                <label class="form-check-label" for="flexRadioDefault3">
                                                    <b><?php $reconocimientos_dato['vigente_rm'];
                                                        if ($reconocimientos_dato['vigente_rm'] == 1) { ?>
                                                            <span class='badge badge-success'>VIGENTE</span>
                                                        <?php } else {
                                                            echo "Activo";
                                                        }
                                                        ?></b>

                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="vigente_rm" id="flexRadioDefault3" value="0" <?php if ($reconocimientos_dato['vigente_rm'] == "0") {
                                                                                                                                                    echo 'Checked';
                                                                                                                                                } ?>>
                                                <label class="form-check-label" for="flexRadioDefault3">
                                                    <b><?php $reconocimientos_dato['vigente_rm'];
                                                        if ($reconocimientos_dato['vigente_rm'] == 0) { ?>
                                                            <span class='badge badge-danger'>NULO</span>
                                                        <?php } else {
                                                            echo "Nulo";
                                                        }
                                                        ?></b>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="cita_rm" id="flexRadioDefault5" value="1" <?php if ($reconocimientos_dato['cita_rm'] == "1") {
                                                                                                                                                    echo 'Checked';
                                                                                                                                                } ?>>
                                                <label class="form-check-label" for="flexRadioDefault3">
                                                    <b><?php $reconocimientos_dato['cita_rm'];
                                                        if ($reconocimientos_dato['cita_rm'] == 1) { ?>
                                                            <span class='badge badge-success'>CITADO</span>
                                                        <?php } else {
                                                            echo "Activo";
                                                        }
                                                        ?></b>

                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="cita_rm" id="flexRadioDefault6" value="1" <?php if ($reconocimientos_dato['cita_rm'] == "0") {
                                                                                                                                                    echo 'Checked';
                                                                                                                                                } ?>>
                                                <label class="form-check-label" for="flexRadioDefault3">
                                                    <b><?php $reconocimientos_dato['cita_rm'];
                                                        if ($reconocimientos_dato['cita_rm'] == 0) { ?>
                                                            <span class='badge badge-danger'>NO CITADO</span>
                                                        <?php } else {
                                                            echo "Nulo";
                                                        }
                                                        ?></b>
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                    </br>
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Fecha CITA MEDICA</label>
                                                <input type="date" name="fechacita_rm" value="<?php echo $reconocimientos_dato['fechacita_rm'] ?>" class="form-control">
                                            </div>
                                        </div>


                                    </div>
                                    </br>
                                    <hr>

                                    <div class="row">
                                        <div class="form-group">
                                            <label for="">Anotaciones / restricciones</label>
                                            <textarea class="form-control" name="anotaciones_rm" rows="6"></textarea>
                                        </div>
                                    </div>

                                    <div class="modal-footer">

                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                        <button type="submit" class="btn btn-primary"><i class="bi bi-envelope-arrow-up"></i></i> Enviar</button>

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--fin modal-->
            
            <!--Modal email cita rm-->
            <div class="modal fade" id="modal-emailcita<?php echo $reconocimiento['id_reconocimiento']; ?>" tabindex="-1" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header" style="background-color:gold">
                            <h5 class="modal-title" id="modal-emailcita" style="color: black;"><i class="bi bi-person-lines-fill"></i>Recon. Médico - <?php echo $reconocimiento['nombre_tr'] ?> - Detalles</h5>
                            <button type="button" class="close" style="color:black;" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <form action="../../app/controllers/reconocimientos/enviar_email.php" method="post" enctype="multipart/form-data">

                                <div class="row">
                                    <input type="text" id="id_reconocimiento" name="id_reconocimiento" value="<?php echo $id_reconocimiento ?>" class="form-control" hidden>

                                    <div class="col-sm-8">
                                        <div class="form-group row">
                                            <label for="nombre_tr" class="col-form-label col-sm-2">Nombre</label>
                                            <div class="col-sm-8">
                                                <input type="text" id="nombre_tr" name="nombre_tr" value="<?php echo $reconocimiento['nombre_tr'] ?>" class="form-control" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group row">
                                            <label for="dni_tr" class="col-form-label col-sm-4">DNI/NIE</label>
                                            <div class="col-sm-8">
                                                <input type="text" id="dni_tr" name="dni_tr" class="form-control" value="<?php echo $reconocimiento['dni_tr'] ?>" readonly>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group row">
                                            <label for="categoria_tr" class="col-form-label col-sm-2">Puesto</label>
                                            <div class="col-sm-8">
                                                <input type="text" id="categoria_tr" name="categoria_tr" class="form-control" value="<?php echo $reconocimiento['nombre_cat'] ?>" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group row">
                                            <label for="centro_tr" class="col-form-label col-sm-4">Centro</label>
                                            <div class="col-sm-8">
                                                <input type="text" id="centro_tr" name="centro_tr" class="form-control" value="<?php echo $reconocimiento['nombre_cen'] ?>" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-8">
                                        <div class="form-group row">
                                            <label for="centro_tr" class="col-form-label col-sm-2">Empresa</label>
                                            <div class="col-sm-9">
                                                <input type="text" id="razonsocial_emp" name="razonsocial_emp" class="form-control" value="<?php echo $reconocimiento['razonsocial_emp'] ?>" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    </br>
                                    <hr>

                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">Destinatario email</label>
                                            <select name="destinatario" id="destinatario" class="form-control">
                                                <?php
                                                foreach ($emailsinteres_datos as $emailsinteres_dato) { ?>
                                                    <option value="<?php echo $emailsinteres_dato['email_ei']; ?>"><?php echo $emailsinteres_dato['nombre_ei'] ?> | <?php echo $emailsinteres_dato['email_ei'] ?></option>
                                                <?php
                                                }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                </br>
                                <hr>
                                <div class="row">
                                    <div class="form-group">
                                        <label for="">Anotaciones / restricciones</label>
                                        <textarea class="form-control" name="anotaciones_crm" value="" rows="2"><?php echo $reconocimiento['anotaciones_rm'] ?></textarea>
                                    </div>
                                </div>

                                <div class="modal-footer">

                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                    <button type="submit" class="btn btn-primary"><i class="bi bi-envelope-arrow-up"></i></i> Enviar</button>

                                </div>
                            </form>
                        </div>
                    </div>

                </div>


            </div>
        <!--fin modal-->

        </tr>
        <?php
        }
        ?>
    </tbody>

</table>

1 respuesta 1

2

El problema es que tienes absolutamente todo el código dentro del ciclo...

foreach ($reconocimientos as $reconocimiento) {...}

Esto implica que estás maquetando 180 modales, uno por cada iteración.

Haz la prueba sacando el código de los modales fuera del ciclo y enviando parámetros para hacer nuevas consultas específicas por cada acción de los botones.

Te voy a dejar un ejemplo básico, pero debes adaptarlo a tu proyecto ya que corregir tu código tomaría bastante tiempo.

Maquetas la tabla con los datos devueltos de la base de datos y agregas un evento onclick en cada botón:

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
    <?php
    // Supongamos que tienes una matriz de datos $rows
    foreach ($rows as $row) {
      echo "<tr>";
      echo "<td>{$row['id']}</td>";
      echo "<td>{$row['name']}</td>";
      echo "<td><button class='btn btn-primary' data-id='{$row['id']}' data-name='{$row['name']}' onclick='openModal(this)' data-toggle='modal' data-target='#exampleModal'>Abrir Modal</button></td>";
      echo "</tr>";
    }
    ?>
  </tbody>
</table>

Fuera del ciclo maquetas el modal:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título del Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="modal-id"></p>
        <p id="modal-name"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar Cambios</button>
      </div>
    </div>
  </div>
</div>

Y haces uso de JavaScript para definir la función openModal y mostrar los datos en el modal:

<script>
function openModal(button) {
  var id = button.getAttribute('data-id');
  var name = button.getAttribute('data-name');

  document.getElementById('modal-id').textContent = 'ID: ' + id;
  document.getElementById('modal-name').textContent = 'Nombre: ' + name;
}
</script>

Adapta este ejemplo a tu proyecto y deja comentarios si surgen dudas al respecto.

1
  • 1
    Genial, tiro de tu consejo, tambien he descubierto que el modal que abro tiene un select de un dato que no debe moverse por lo que dejo el campo en "readonly" y quito el select. esto me ha servido tambien. Commented el 26 jul. a las 10:45

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.