0

Estoy trabajando con PHP y MYSQL, en mi sistema tengo una tabla para mostrar una lista de usuarios, quise implementar DATATABLE para agregar filtros y otras opciones de búsqueda a cada columna. Lo implementé y logré que funcionara en la tabla. El problema que tengo y hasta ahora no he logrado resolver, es que mi pagina al tener DATATABLE tarda en cargar y que se acomode correctamente el contenido de forma inmediata. La tabla de la cual realizo la consulta, tiene aprox. 2000 registros.

Mi código de mi pagina lista.php en donde aplico el Datatable es el siguiente:

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <script 
       src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script>
    <script 
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"> 
    </script>
    <script src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.js"> 
    </script>

    <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt- 
    1.10.18/datatables.min.css">
    <title>Lista Usuarios</title>
 </head>
 <body>
    <div class="table-responsive" id="mydatatable-container">
        <table id="mydatatable">        
            <thead>
                <tr>
                    <th class="text-center" style="width: 5%;">ID</th>
                    <th class="text-center" style="width: 21%;">Nombre</th>
                    <th class="text-center" style="width: 17%;">Correo</th>
                    <th class="text-center" style="width: 14%;">Carrera</th>
                    <th class="text-center" style="width: 10%;">Nombre</th>
                </tr>
            </thead>
        <tfoot>
            <tr>
                <th>Filter..</th> 
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
                <th>Filter..</th>
            </tr>
        </tfoot>
        <tbody>

    <?php 
        $query = mysqli_query($coneccion,"
        SELECT u.id, u.nombre, u.correo, c.nombre_carrera, u.usuario
        FROM usuario u INNER JOIN carrera c on u.id=c.id
        WHERE u.estado = 1 ORDER BY nombre DESC");

        mysqli_close($conection);

        $result = mysqli_num_rows($query);
        if($result > 0)
        {
            while ($data = mysqli_fetch_array($query, MYSQLI_ASSOC)) 
            {           
        ?>
            <tr>
                <td><?php echo $data["id"]; ?></td>
                <td><?php echo $data["nombre"]; ?></td>
                <td><?php echo $data["correo"]; ?></td>
                <td><?php echo $data["nombre_carrera"]; ?></td>
                <td><?php echo $data["usuario"]; ?></td>
            </tr>
            <?php 
            }
            ?>
         </table>


 <style>
     #mydatatable tfoot input{
     width: 100% !important;
     }
     #mydatatable tfoot {
     display: table-header-group !important;
     }
 </style>

 <script type="text/javascript">
       $(document).ready(function() {
       $('#mydatatable tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Filtrar.." />' );
        } );

       var table = $('#mydatatable').DataTable({
       "dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p> 
       <"clearfix">',
     "responsive": false,
     "language": {
         "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
      },
      "order": [[ 1, "DESC" ]],
      "initComplete": function () {
         this.api().columns().every( function () {
             var that = this;

             $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                      }
                  });
               })
             }
          });
        });
        </script>
      </body>
     </html>

He realizado pruebas quitando el código del Datatable y el contenido de la pagina carga inmediatamente, agradecería si alguien me puede orientar para resolver mi problema.

2 respuestas 2

1
+50

Creo que podrias intentar cargar el dt del lado del servidor, Dt admite la paginación del lado del servidor, eso significa que solo se cargarán y mostrarán un número específico de registros a la vez.

Procura cargar los datos de manera asincrona, o sea que primero se cargue la pagina y luego lod datos de tu dt

De esta forma podrias hacerlo

<?php
$draw = $_POST['draw'];
$start = $_POST['start'];
$length = $_POST['length'];
$searchValue = $_POST['search']['value'];

$query = "SELECT u.id, u.nombre, u.correo, c.nombre_carrera, u.usuario
          FROM usuario u INNER JOIN carrera c ON u.id = c.id
          WHERE u.estado = 1";

// Aplica el filtro de búsqueda si se proporciona uno
if (!empty($searchValue)) {
    $query .= " AND (u.nombre LIKE '%$searchValue%'
                 OR u.correo LIKE '%$searchValue%'
                 OR c.nombre_carrera LIKE '%$searchValue%'
                 OR u.usuario LIKE '%$searchValue%')";
}

$query .= " ORDER BY nombre DESC LIMIT $start, $length";


?>

JS

$(document).ready(function() {
    var table = $('#mydatatable').DataTable({
        "processing": true,
        "serverSide": true,  // Habilita el modo servidor
        "ajax": {
            "url": "tu_script.php", // Ruta a tu script PHP que maneja la lógica del servidor
            "type": "POST",
        },
        "columns": [
            // Definición de tus columnas
            { "data": "id" },
            { "data": "nombre" },
            { "data": "correo" },
            { "data": "nombre_carrera" },
            { "data": "usuario" }
        ],
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
        },
       
    });
});

Espero te pueda ayudar en algo, saludos

2
  • Gracias por responder, lo de la URL tu_script.php no entiendo bien a donde debería apuntar... al PHP.ini???
    – SBK22
    Commented el 23 nov. 2023 a las 14:46
  • 1
    No, hace referencia a un archivo script que tienes que crear, que implementa la lógica del servidor para manejar las solicitudes AJAX de DataTables, por medio de ese archivo realizas las consultas sql. Algo parecido a esto MiProyecto - public_html - js - tu_script.js - php - tu_script_php.php - index.php
    – dsr
    Commented el 23 nov. 2023 a las 14:56
0

Puedes tratar de en lugar de hacer la consulta desde tu código, hacerlo con un Store Procedure para que tu código solo reciba la información y no tenga que procesar.

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 28 nov. 2023 a las 22:57

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.