1

solicitando su ayuda para aumentar la velocidad de carga de las DataTables. Genero las tablas de manera dinámica a través de una consulta a la base de datos y del lado del cliente les doy formato con javascript. Funciona de maravilla y una buena manera de mostrar la información, el problema se genera cuando probé con una consulta de 15,000 registros y tarda al rededor de 3 minutos para la carga.

Las tablas las genero de la siguiente manera:

Function fnDTCALIFICADORAS()
    {
        $SQL = "SELECT * FROM VCALIFICADORAS";
        $CONEXION = fnConexion();
        $RESULTADO = mysqli_query($CONEXION,$SQL);
        $TABLE = "<table id='dtCalificadoras' class='table table-striped table-bordered' style='width:100%'>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t<thead>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t\t<tr>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t\t\t<th style='text-align: center; font-size:1.2rem; display: none;'>ID</th>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t\t\t<th style='text-align: center; font-size:1.2rem;'>Calificadora</th>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t\t\t<th style='text-align: center; font-size:1.2rem;'>Calificación</th>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t\t\t<th style='text-align: center; font-size:1.2rem;'>Acciones</th>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t\t</tr>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t</thead>\n";
        $TABLE .= "\t\t\t\t\t\t\t\t<tbody>\n";
        while($REGISTROS = mysqli_fetch_assoc($RESULTADO))
        {
            $TABLE .= "\t\t\t\t\t\t\t\t\t<tr>\n";
            $TABLE .= "\t\t\t\t\t\t\t\t\t\t<td style='font-size:1.1rem; display: none;'>".$REGISTROS["ID"]."</td>\n";
            $TABLE .= "\t\t\t\t\t\t\t\t\t\t<td style='font-size:1.1rem; vertical-align: middle;'>".$REGISTROS["CALIFICADORA"]."</td>\n";
            $TABLE .= "\t\t\t\t\t\t\t\t\t\t<td style='font-size:1.1rem; vertical-align: middle;'>".$REGISTROS["CALIFICACION"]."</td>\n";
            $TABLE .= "\t\t\t\t\t\t\t\t\t\t<td align='center'>"."<a href='#' data-toggle='tooltip' data-placement='left' title='Actualizar'><button type='button' class='btn btn-default btn-sm' data-toggle='modal' href='#editCalificadora' id='btnActCalificadora'><span class='fa fa-refresh'></span></button></a>"."<a href='#' data-toggle='tooltip' data-placement='left' title='Eliminar'><button type='button' class='btn btn-default btn-sm' data-toggle='modal' href='#inacCalificadora' id='btnDesacCalificadora'><span class='fa fa-trash'></span></button></a>"."</td>\n";
        }
        $TABLE .= "\t\t\t\t\t\t\t\t</tbody>\n";
        $TABLE .= "\t\t\t\t\t\t\t</table>\n";
        fnDesconexion($CONEXION);

        RETURN $TABLE;
    }

Por el lado de javascript le doy formato de paginación, exportación, scroll XY de la siguiente manera:

$(document).ready(function() //CONTROL PARA DATATABLE CALIFICADORAS
    {
        $('#dtCalificadoras thead tr:eq(1) th').each( function (i)
        {
            var title = $(this).text();
            $( 'input', this ).on( 'keyup change', function () 
            {
                if ( table.column(i).search() !== this.value ) 
                {
                    table
                    .column(i)
                    .search( this.value )
                    .draw();
                }
            });
        });
        var table = $('#dtCalificadoras').DataTable(
        { 
            dom: 'Blfrtip',
            "order": [[ 1, "asc" ]],
            buttons: 
            [{
                extend: 'excelHtml5',
                exportOptions: {
                    columns: [1,2] },
                text: 'Exporta Calificadoras',
                autoFilter: true,
                sheetName: 'Calificadoras CRM'
            }],

            orderCellsTop: true,
            fixedHeader: true
        });
        table.button(0).nodes().css('background', '#0b91cf');
        table.button(0).nodes().css('border-radius', '2rem 2rem 2rem 2rem');
        table.button(0).nodes().css('color', 'white');
        table.button(0).nodes().css('box-shadow', '0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)');
        $('#dtCalificadoras tbody').on('click', 'tr', function()
        {
            var dtCalificadoras = table.row(this).data();
            $("#idActCalificadora").val(dtCalificadoras[0]); //ID CALIFICADRA ACTUALIZAR
            $("#idCalificadora").val(dtCalificadoras[0]); //ID CALIFICADORA DESACTIVAR
            $("#txtCalificadoraEdit").val(dtCalificadoras[1]); //CALIFICADORA ACTUALIZAR
            $("#txtCalificacionEdit").val(dtCalificadoras[2]); //CALIFICACION ACTUALIZAR
            
            document.getElementById("txtCalificadoraDesac").innerHTML=dtCalificadoras[1]; //SECTOR DESACTIVAR
        });
    });

Alguien sabe como optimizar la carga del lado del cliente? Gracias, Saludos

1

2 respuestas 2

1

Intenta utilizando la opción que te proporciona datatables que es la de el server side processing.

Aquí tienes el ejemplo proporcionado por ellos https://datatables.net/examples/data_sources/server_side

El problema se da por que intentas traer todos los resultados de una sola vez y renderizarlos al mismo tiempo. lo que puedes hacer es que te traiga cierta cantidad de datos y al pasar cierta página de tu paginador este cargue otra vez la misma cantidad pero comenzando de donde se quedo la ultima vez.

0

Gracias @SistemasSinZanjas, tiene una infinita biblioteca DataTable. La referencia fue la solución, el tema es que el ejemplo esta Harcodeado, dinámicamente quedo de la siguiente manera, nuevamente gracias y coloco el ejemplo totalmente funcional que sirva de apoyo para todos los demás:

Esqueleto del lado del diseño:

<table id='dtCarteraFondos' class='table table-striped table-bordered' style='width:100%'>
    <thead>
        <tr>
            <th style='text-align: center; font-size:1.2rem; display: none;'>ID</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Fondo</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Tipo de Inversión</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Emisora</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Serie</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Tipo de Valor</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Calificación de Instrumento de Deuda</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Bursatilidad Instrumento de Renta Variable</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Cantidad de Títulos Operados</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Valor Razonable o Contable Total</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Días por Vencer</th>
            <th style='text-align: center; font-size:1.2rem; vertical-align: middle;'>Fecha</th>
        </tr>
    </thead>
</table>

Es importante el archivo que contiene la consulta y la base en formato JASON el cual lo llamé: dtcarterafondos.php:

<?php

    session_start();
    require_once 'Functions.php';

    $CONEXION = fnConexion();
    $SQL = "SELECT * FROM VCFONDOS";
    $RESULTADO = mysqli_query($CONEXION,$SQL);

    if(!$RESULTADO)
    {
        die("Error");
    }
    else
    {
        while($DATA = mysqli_fetch_assoc($RESULTADO))
        {
            $ARREGLO["data"][] = $DATA;
        }
        echo json_encode($ARREGLO);
    }

    mysqli_free_result($RESULTADO);
    fnDesconexion($CONEXION);

?>

Y para finalizar se invoca la construcción a través de javascript:

$(document).ready(function() //CONTROL PARA DATATABLE
    {
        listar();
    });
    var listar = function()
    {
        var table = $('#dtCarteraFondos').DataTable(  //ID DE LA TABLA
        {
            "ajax":
            {
                "method":"POST",
                "url":"dtcarterafondos.php" //archivo de conexión
            },
            "columns":
            [
                //{"data":"ID"},
                {"data":"FONDO"},
                {"data":"TIPO_INVERSION"},
                {"data":"EMISORA"},
                {"data":"SERIE"},
                {"data":"TIPO_VALOR"},
                {"data":"CALIFICACION"},
                {"data":"BURSATILIDAD"},
                {"data":"TITULOS_OPERADOS"},
                {"data":"VALOR_RAZONABLE"},
                {"data":"DIAS_XVENCER"},
                {"data":"FECHA"}
            ]
        });
    }

Es el ejemplo de la referencia, pero dinámicamente. Saludos

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.