0

Hola tengo una dataTable en mi proyecto pero resulta que se cargan todos los registros de la base de datos de una sola vez y después me muestra la tabla con 50 resultados y eso es muy tedioso, hay alguna manera de poner un lazy loading o un spiner o una leyenda que diga cargando? Estoy usando php, mysql. He buscado en la documentación y no he encontrado nada solo unos con AJAX y a mi no me sirve porque tengo que crear un archivo aparte para usar ajax: '/path/to/script', y yo traigo todo de una consulta mysql. He visto que tiene la opción deferRender: true, pero lo mismo no me funciona.

JS

$(document).ready(function () {
    $('#example').DataTable({
        lengthMenu: [
            [50, 100, 200, -1],
            [50, 100, 200, 'Todos'],
        ],
        deferRender: true
    });
});

TABLA QUE CARGA LOS RESULTADOS DE LA BASE

<?php include('conectar.ini.php'); ?>
$conn = new mysqli($servername, $username, $password, $dbname);
$nquery=mysqli_query($conn,"select * from `personal`");

<table class="table-striped table-bordered table-hover display" id="example" width="990" align="center">
<thead>
        <th width="20%"><input type="checkbox" id="todos"></th>
        <th width="20%">APELLIDO</th>
        <th width="15%">NOMBRE</th>
        <th width="10%">CATEGORIA</th>
        <th width="10%">DNI</th>
        <th width="15%">VENC. DNI</th>
        <th width="15%">FECHA NAC.</th>
        <th width="15%">NACION.</th>
        <th class="text-center">VER</th>
        <th class="text-center">EDITAR</th>
        <th class="text-center">ELIMIN</th>
</thead>
<tbody>
        <?php

            while($crow = mysqli_fetch_array($nquery)){
        ?>
  <tr>
       <td><input type='checkbox' name='usuarios[]' value='" <?php echo $crow['id_personal'] ?>"'></td>
        <td><?php echo $crow['apellido']; ?></td>
        <td><?php echo $crow['nombre']; ?></td>
        <td><?php echo $crow['categoria']; ?></td>
        <td><?php echo $crow['dni']; ?></td>
        <td><?php echo $vc;?></td>
        <td><?php echo $fn; ?></td>
        <td><?php echo $crow['nacionalidad']; ?></td>
            
        <!--VER PERSONAL-->
        <td class='text-center'>
        <a href="../ver_personal.php?id_personal=<?php echo $crow['id_personal'];?>" title="Ver Persona"><i class="fas fa-eye" style="color: #ff6318"></i></a>
        </td>
            
        <!--EDITAR PERSONAL-->
        <td class='text-center'>
        <a href='../editar-personal.php?id_personal=<?php echo $crow['id_personal'];?> ' title="Editar Persona">
        <button type='button' class='fas fa-1x fa-edit border-0' style='color:#ff6318;'></button>
        </a>
        </td>
            
        <!--ELIMINAR PERSONAL-->
        <td class="text-center">
        <a onclick="eliminarPersona('<?php echo $crow['id_personal'] ?>')" title="Eliminar Persona">
        <button type="button" class="fas fa-1x fa-trash-alt border-0" style="color: red;"></button>
        </a>
        </td>
        
        </tr>
            
    <?php
    }
    ?>
</tbody>
</table>

Ojo, no tengo error de carga, lo único es que se me carga todos los registros y después hacen la paginación, y es muy tedioso, por ahora tengo solo 120 registros, me imagino cuando tenga 500, será una eternidad en cargar todo y después mostrar la tabla con la paginación. Alguien que pudo resolver eso y me pueda ayudar? Gracias de antemano.

14
  • En mi humilde opinión, 120-500-1000-3000-10000 no hacen ninguna diferencia a una consulta sql. Si tarda tanto en ejecutar 120 registros. El problema es el hardware de tu maquina (RAM) el 27 feb. 2023 a las 14:29
  • @JeffersonJimenez por supuesto que hay diferencia entre 100 y 10000 registros tanto del lado del cliente como del lado del servidor. Tal vez no sea muy evidente cuando un solo usuario es quien ejecuta la consulta, pero imagina un sistema con varios usuarios haciendo la misma petición al mismo tiempo.
    – DjCrazy
    el 27 feb. 2023 a las 14:36
  • Gracias por la respuesta pero tengo una i7 y 300mb de internet así que no depende de la velocidad ni de la RAM de la maquina, es un problema de DataTable, he visto que varios tiene el mismo problema, muchos han solucionado con AJAX pero a mi no me sirve AJAX porque traigo todo desde la consulta sql el 27 feb. 2023 a las 14:37
  • @DjCrazy claro, me preocupa cuando tenga 500 o 100 registros el 27 feb. 2023 a las 14:38
  • Sidney, acá hay un par de enlaces que tal vez te puedan interesar: procesamiento del lado del servidor de la documentación de datatables y Por qué tus páginas con DataTables tardan tanto en cargar. También considera el uso de peticiones asíncronas con ajax o fetch. La cantidad de datos a cargar se puede enviar como parámetros en la petición, así le dices al query de sql cuantos registros cargar y en cual registro empezar.
    – DjCrazy
    el 27 feb. 2023 a las 14:41

1 respuesta 1

0

Bien, crea una Base de datos: test y luego ejecuta este sql

CREATE TABLE
  `users` (
    `id` int(20) NOT NULL,
    `name` varchar(200) NOT NULL,
    `email` varchar(200) NOT NULL,
    `phone` int(10) NOT NULL
  ) ENGINE = MyISAM DEFAULT CHARSET = utf8mb4;
INSERT INTO
  `users` (`id`, `name`, `email`, `phone`)
VALUES
  (1, 'JOSE PEREZ', '[email protected]', 555555555),
  (4, 'IVANA PETIT', '[email protected]', 777777777),
  (5, 'XIOMARA NAVA', '[email protected]', 1111111111),
  (7, 'JOSE TARRE', '[email protected]', 541214471);
ALTER TABLE
  `users`
ADD
  PRIMARY KEY (`id`);
ALTER TABLE
  `users` MODIFY `id` int(20) NOT NULL AUTO_INCREMENT,
  AUTO_INCREMENT = 8;
COMMIT;

Crea un archivo y llamalo php.php y pega este codigo

$servidor = 'localhost';
$user_admin = 'xxxxxxxx'; //tu usuario admin
$user_pass = 'xxxxxxxx'; // tu password de poseerla
$database = 'test'; // tu base de datos
$bd = new mysqli($servidor, $user_admin, $user_pass, $database, 3306);
$bd->set_charset("utf8");

// Aca recibimos lo que fecth envia en una unica variable
$json = json_decode(file_get_contents('php://input'), true);
 
 
if (!empty($json['id'])) { //si enviamos el id ...
  //Pasamos el id para buscar el users especifico
   $qA = "SELECT * from users where id = '" . $json['id'] . "'";
   $rA = $bd->query($qA);
   while ($fA = $rA->fetch_array()) {
      $edit = array(
         'id' => $fA[0],
         'name' => $fA[1],
         'email' => $fA[2],
         'phone' => $fA[3]
      );
   }
   // extraemos su informacion para pasarlo a javascript
   echo json_encode($edit, true); //devolvemos en json
   // y luego lo pintamos en el modal
} else if (!empty($json['JsonPars'])) { //aca enviamos el formdata
   $id = $json['JsonPars']['id'];
   $name = $json['JsonPars']['name'];
   $email = $json['JsonPars']['email'];
   $phone = $json['JsonPars']['phone'];
   if (empty($id)) { //si el id es vacio quiere decir que debemos crear
      $insert = "INSERT INTO users(name,email,phone)
      VALUES('" . $name . "','" . $email . "','" . $phone . "')";
      if (empty($bd->query($insert))) echo 'Error MySql ' . $bd->error;
      else echo 'insert';
      //devolvemos el resultado en text para que ejecutar las notify javascript
   } else {
      //caso contrario editamos el users por medio de su id
      $update = "UPDATE users SET
      name = '" . $name . "',
      email = '" . $email . "',
      phone = '" . $phone . "'
      WHERE id ='" . $id . "'";
      if (empty($bd->query($update))) echo 'Error MySql ' . $bd->error;
      else echo 'update';
      //devolvemos el resultado en text para que ejecutar las notify javascript
   }
   $bd->close();
} else if (!empty($json['ID_delete'])) { //aca enviamos el id solo para eliminar
   $delete = "DELETE FROM users WHERE id = '" . $json['ID_delete'] . "' ";
   if (empty($bd->query($delete))) echo 'Error MySql ' . $bd->error;
   else echo 'ok';
   $bd->close();
} else { // como ninguna de las condiciones anteriores se cumplieron
   //quiere decir que debemos dibujar el datatable
   $qA = "SELECT * from users order by name";
   $rA = $bd->query($qA);
   $tabla = array();
   while ($fA = $rA->fetch_array()) {
      array_push($tabla, array(
         $fA[1],
         $fA[2],
         $fA[3],
         '<div class="d-flex justify-content-center">
         <span onclick="edita(' . $fA[0] . ');"><span><i class="fa-regular fa-pen-to-square fs-5 text-muted" role="button"></i></span></span>
         <span onclick="borra(' . $fA[0] . ');"><span><i class="fa fa-trash fs-5 text-danger ms-3" role="button"></i></span></span>
      </div>'
      ));
   }
   echo json_encode($tabla, true); //devolvemos en json
   // y luego lo pintamos en el datatable
}

Por ultimo crea un archivo y llamalo index.php y pega este codigo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD DYNAMIC TABLE USERS</title>

    <!-- obviamente llamamos al cdn de bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- referenciamos unas pequeñas libreria mias para datatable y notify -->
    <script src="https://unpkg.com/[email protected]/bootstrap_datatable.js" defer></script>
    <script src="https://unpkg.com/[email protected]/notify_jefferson.v1.min.js" defer></script>


    <style>
        @import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');

        body {
            font-family: 'Maven Pro', sans-serif;
        }
    </style>

</head>

<body>
    <section class="container mt-3">
        <h3 class="text-center p-2 mt-1 mb-5">CRUD DYNAMIC TABLE USERS</h3>

        <!-- para la tabla html creamos un div y asignamos un id -->
        <div id="users"></div>

        <!-- creamos un modal unico    -->
        <div class="modal" id="myModal" style="background-color: rgba(0, 0, 0, 0.4);" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                        <button type="button" class="btn-close x-close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="frm">
                            <input id="id" name="id" class="d-none">
                            <div class="form-floating mb-3">
                                <input class="form-control" id="name" name="name" placeholder="name">
                                <label for="name">name</label>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="email" name="email" placeholder="email">
                                        <label for="email">email</label>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="phone" name="phone" placeholder="phone">
                                        <label for="phone">phone</label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary x-close">Close</button>
                        <button type="button" class="btn btn-primary" id="save">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <script>
        let titulo = document.querySelector('.modal-title');


        //function para cargar o recargar la tabla
        const PintoLaTabla = () => {
            //Invocamos la construccion de la tabla
            new BootstrapDatatable({
                id_div: 'users', //el id del div
                th_column: ['NAME', 'EMAIL', 'PHONE', 'ACCION'], //el thead
                url: 'php.php', //la url donde esta la consulta php
                id_btn_add: 'addBtn', //creamos el boton para agregar nuevo registro con el id:addBtn
                clase: 'border table-striped table-hover table-bordered' //coloco las clases bootstrap de la table
            });
            //Escuachamos el evento click del addBtn
            addBtn.addEventListener('click', () => {
                frm.reset();
                titulo.innerHTML = '<span class="text-success">AGREGA UN NUEVO REGISTRO</span>';
                myModal.style.display = 'block';
            });
        }


        //Al terminar de cargar la pagina    
        document.addEventListener('DOMContentLoaded', function() {
            PintoLaTabla(); //Ejecutamos la funcion que se encargara de dibujar la tabla  
        });


        //Funcion edita por medio de fetch envio el id y traigo los datos
        const edita = (i) => {
            frm.reset();
            FetchAsynAwait('php.php', {
                'id': i
            }).then((ret) => {
                for (let elem in ret) { //recorro el array que recibo
                    let valor = ret[elem]; //aca le saco la data
                    document.querySelectorAll('#frm input').forEach(function(e) { //recorro el form 
                        //le indico que si el id de los input son iguales a las llaves del array
                        if (e.id == elem) e.value = valor; //pues le coloque la data a quien corresponda
                    });
                }
                titulo.innerHTML = '<span class="text-primary">EDITA ESTE REGISTRO</span>';
                myModal.style.display = 'block'; //finalmente abro el modal con la data ya pintada
            })
        }


        //Al presionar Save changes
        save.addEventListener('click', (e) => {
            e.preventDefault();
            //------
            //me creo un formdata
            let formData = new FormData(frm);
            let JsonPars = {};
            formData.forEach(function(value, key) {
                JsonPars[key] = value;
            });
            //--- 
            FetchAsynAwait('php.php', {
                'JsonPars': JsonPars //para luego enviarselo a php
            }, 'text').then((ret) => {
                if (ret.trim() == 'insert') {
                    PintoLaTabla();
                    myModal.style.display = 'none';
                    tshow('success', '¡AGREGADO!', 'Creado con exito nuevo registro.');
                } else if (ret.trim() == 'update') {
                    PintoLaTabla();
                    myModal.style.display = 'none';
                    tshow('info', '¡EDITADO!', 'El registro ha sido modificado.');
                } else {
                    tshow('danger', '¡ERROR!', ret);
                }
            });
        });


        //function para eliminar un registro
        const borra = (i) => {
            let mu = 'Seguro desea eliminar el registro <b>' + i +
                '</b><br><div class=" mt-2 d-flex justify-content-end"><span class="btn btn-light border btn-sm" onclick="SIACEPTO(' +
                i + ');">SI</span></div>';
            tshow('warning', '¡ADVERTENCIA!', mu, 16e3);
        }
        const SIACEPTO = (i) => {
            FetchAsynAwait('php.php', {
                'ID_delete': i
            }, 'text').then((ret) => {
                if (ret.trim() == 'ok') {
                    PintoLaTabla();
                    tshow('success', '¡ELIMINADO!', 'Se ha eliminado el registro.');
                } else {
                    tshow('danger', '¡ERROR!', ret);
                }
            });
        }


        //Escuchando para cerrar el modal
        document.querySelectorAll('.x-close').forEach(function(elem) {
            elem.addEventListener("click", function() {
                myModal.style.display = 'none';
            });
        });


        // function fetch para enviar por POST cumple lo mismo que ajax de jquery
        const FetchAsynAwait = async (pag, dataJson, r = 'json') => {
            const opciones = {
                method: 'POST',
                cache: 'no-cache',
                body: JSON.stringify(dataJson),
                headers: {
                    'Content-Type': 'application/json'
                }
            };
            try {
                const fetchResp = await fetch(pag, opciones);
                const retorna = await r === 'json' ? fetchResp.json() : fetchResp.text();
                return retorna;
            } catch (e) {
                return e;
            }
        }
    </script>
</body>

</html>

Lee las líneas comentadas para que logres digerir y entender todo.

Saludos y espero te ayude eso

1

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.