jQuery DataTables: inicio lento, tabla html “normal” que se muestra al principio

Solución:

Hice una solución muy simple que funciona bien. En la inicialización de DataTable utilicé el método show ():

$(document).ready(function() {
    $('#example').dataTable({
        "order": [[ 0, 'asc' ]]
    });
    $('#example').show();
} );

… y en la tabla HTML puse el estilo display: none:

<table id="example" class="display" cellspacing="0" width="100%" style="display:none">

¡Buena suerte!

Yo tuve el mismo problema. Prueba esto:

var dTable=$("#detailtable").dataTable({
        "bProcessing":true,
        "bPaginate":false,
        "sScrollY":"400px",
        "bRetrieve":true,
        "bFilter":true,
        "bJQueryUI":true,
        "bAutoWidth":false,
        "bInfo":true,
        "fnPreDrawCallback":function(){
            $("#details").hide();
            $("#loading").show();
            //alert("Pre Draw");
        },
        "fnDrawCallback":function(){
            $("#details").show();
            $("#loading").hide();
            //alert("Draw");
        },
        "fnInitComplete":function(){
            //alert("Complete");
        }

[edit to add: This older answer refers to the previous DataTables API. The jQueryUI options are deprecated and recommendations for replacement are found here: https://datatables.net/manual/styling/jqueryui Also, fnInitCallback (as with all other options) dropped Hungarian notation and is now initCallback]

A continuación, la respuesta original:

---

Mi advertencia es que no estoy familiarizado con las vistas parciales de _Scripts, por lo que el siguiente consejo es lo que le daría a alguien que simplemente incluya y llame a JavaScript de la manera ‘normal’:

1. Diseñe la tabla HTML sin formato para que tenga la misma apariencia que la final. Si tiene la interfaz de usuario jQuery habilitada (bJQueryUI: true), esto significa tener las clases de jQuery UI en la tabla ‘simple’ en lugar de esperar a que DT las agregue.

2. Utilice varias técnicas FOUC (flash of unstyled content) para ocultar la tabla hasta que esté lista para renderizar. La API de DataTables tiene devoluciones de llamada útiles que puede usar para la parte “mostrarlo ahora” de las cosas, como fnInitCallback. La técnica más básica (pero perjudicial para la accesibilidad) es diseñar la mesa con pantalla: ninguna, y en la devolución de llamada, use $('#myTable').show() o alguna variación. La búsqueda en Internet debería proporcionar algunas soluciones excelentes que preserven la accesibilidad.

Aparte de eso, en realidad es solo una cuestión de (¡como usted dice!) Tolerancia a lo “aceptable”. Usamos procesamiento del lado del servidor (devolviendo muchos menos registros), un cargador de scripts para un tiempo de carga de scripts más rápido (¡estamos experimentando con head.js pero hay otros!) Y las versiones minimizadas de los scripts. Incluso con esto, a veces vemos la tabla simple por un momento antes de que se convierta en un DT, pero dado que los usuarios de Internet están acostumbrados a ver páginas que se ‘construyen’ ante sus ojos a medida que se cargan los elementos, fue una compensación aceptable. Para ti, puede que no lo sea.

¡Buena suerte!

---

---

Utiliza Nuestro Buscador