0

Tengo un datatable que carga exitosamente los datos, le toma un tiempo mostrar todos los registros, he buscado como poner un loader pero no me funciona correctamente.

Buscando algunos demos en internet hay un loader que si lo carga , pero se queda ahi y jamas muestra el datatable.

Con este script se pretende que al momento que termine de cargar los datos, deje de mostrar el circulo girando.

<script type="text/javascript">
    $(window).on('load', function () {
            $(".loader-page").css({visibility:"hidden",opacity:"0"})
        },
    });
</script>

Este es el CSS  y si funciona muestra un circulo girando y dentro de este el gif. 
.loader-page {
    position: fixed;
    z-index: 25000;
    background: url('../imagenes/loader/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249);
    /*background: rgb(255, 255, 255);*/
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .3s ease;
}
.loader-page::before {
    content: "";
    position: absolute;
    border: 2px solid rgb(50, 150, 176);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(50, 150, 176,0);
    border-top: 2px solid rgba(50, 150, 176,0);
    animation: rotarload 1s linear infinite;
    transform: rotate(0deg);
}
@keyframes rotarload {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}
.loader-page::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(50, 150, 176,.5);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(50, 150, 176, 0);
    border-top: 2px solid rgba(50, 150, 176, 0);
    animation: rotarload 1s ease-out infinite;
    transform: rotate(0deg);
}

Para no poner todo el Datatable  solo añadi las lineas en donde se coloca el div que mostrara el loader no importa donde ponga el <div>  no funciona se queda la pantalla en blanco. 
<div class="container-fluid">
    <div class="DataTables_sort_wrapper">
        <div class="loader-page"></div>   <<<---- Muestra la animación de un circulo girando y dentro de este otra imagen. 

Hay forma de hacer que se muestre el loader durante el tiempo que tarda en cargar los datos...

Saludos

7
  • Tu Datatable es Serverside? porque si tu datatable tarda tanto en cargar es porque deseas cargar muchos datos en ella, si es así mejor usa serverside. Commented el 29 sept. 2021 a las 21:09
  • No los datos los carga del lado del cliente creo que lo denominan Client-side , pues igual podría no poner nada, pero hay gente muy desesperada que espera algún tipo de información o retroalimentación de que el sistema sigue funcionando es digamos solo estético no funcional.
    – Cesarin
    Commented el 29 sept. 2021 a las 21:14
  • Los cargas del lado del cliente? por eso mi pregunta es.. cuanto es la cantidad de datos que traes en el datatable? Commented el 29 sept. 2021 a las 21:24
  • No es mucho en esta tabla en particular son 3680 registros pero trae varios datos para rellenar 8 celdas x cada registro en producción y dependiendo de tu conexión a internet varia el tiempo desde los 30 segundos a 1 minuto de carga, pero habrá situaciones en que podría tardar mas. Precisamente hace un par de horas estaba leyendo sobre ese tema de Serverside vs Clientside aunque no llegue a ninguna conclusión de momento. La otra cuestión es dejarlo así ya que esta información solo seria vista a lo mucho por 3 a 4 personas de un universo de 520 empleados y no se requiere todo el tiempo.
    – Cesarin
    Commented el 29 sept. 2021 a las 21:34
  • Usa Serverside que te ahorra el trabajo y de una te deja la paginación de 10 registros, así evitas cargar mas de 10 registros, es mucho mejor y te trabajará más rápido, no solo esa sino todos tus datatables Commented el 29 sept. 2021 a las 21:38

1 respuesta 1

0

Aquí te dejo una solución:

1-Primero llamas al Datatable

     $('#tabla').DataTable({
      filter: false,
      destroy: true,
      processing: true,
      serverSide: true,
      responsive:true,
      ajax:{
        url : "laurlabuscar",
        type: "POST",
        data: { dataString: "" },
        beforeSend: function(){
              $("#loading").show();
        },
        error: function(){
        },
        complete: function(){
              $("#loading").hide();
        }
      },
      order: [[ 0, "desc" ]]
    });

2-En php (por ejemplo) Recibes varias cosas (en consola puedes ver todo lo que envia), lo mas importante son estos 2 post

    1- start
    2- length

Con esos puedes realizar una consulta limitada Ejemplo de Consulta:

"SELECT * FROM TABLA LIMIT start,length" //0,10 luego sera 11,20 y asi...

y por ultimo respondes con un Json así:

$json = array(
"draw"            => intval( $this->input->post('draw') ),
"recordsTotal"    => 3800, //Aqui consultas el total de registros
"recordsFiltered" => 10, //aqui la cantidad filtrada
"data"            => $lista //esto es tu array de los datos
);

echo json_encode($json);

El Ejemplo esta en PHP pero ya con el post puede usar en el servidor que necesites.

NOTA: el recordsTotal lo usas con una consulta count para saber cuantos registros son en total, eso te servira para que abajo del datatable diga:

Mostrando x registros de x

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.