jQuery DataTables - Slow initiation, “Normal” html

Question

I'm using jQuery DataTable plugin, but I got a concern where the scripts loading seems to take some time, so my web page is always displaying the ordinary html table first, and after all script done, the table will then become DataTable. I don't think this kind of appearance is acceptable, so I hope can get some advices here. whether I can make the scripts faster, or don't display the plain table ahead? Btw, I am calling my script from a _Scripts partial view at my _Layout.cshtml head tag

 @Html.Partial("_Scripts") 

(UPDATE) I tried to hide the table, and show it after the datatable initialize, however, I get a datatable without the table header. Any idea why this is happening?

$('#stocktable').hide();
// Initialize data table
    var myTable = $('#stocktable').dataTable({

        // Try styling
        "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true,

        // To use themeroller theme
        "bJQueryUI": true,
        // To use TableTool plugin
        "sDom": 'T<"clear">lfrtip',
        // Allow single row to be selected
        "oTableTools": {
            "sRowSelect": "single"
        },
        "fnInitComplete": function () {
            $('#stocktable').show();
        }

Answer 1

Based on @hanzolo suggestion - here's my comment as an answer (and what my dataTable looks like):

var stockableTable = $('#stockable').dataTable({
      "bLengthChange": false,
      "iDisplayLength": -1,
      "bSort": false,
      "bFilter": false,
      "bServerSide": false,
      "bProcessing": false,
      "sScrollY": "500px",
      "sScrollX": "95%",
      "bScrollCollapse": true,
      // The following reduces the page load time by reducing the reflows the browser is invoking
      "fnPreDrawCallback":function(){
          $("#loading").show();
      },
      "fnDrawCallback":function(){
      },
      "fnInitComplete":function(){
          $("#details").show();
          this.fnAdjustColumnSizing();
          $("#loading").hide();
      }
  });

Answer 2

My working solution is a "dirty" trick to hide the table without using "display:none". The ordinary "display:none" style causes initialization problem for jQuery Data Tables.

First of all, place your data table in a wrapper div:

<div id="dataTableWrapper" style="width:100%" class="dataTableParentHidden">
...data table html as described in jQuery Data Table documentation...
</div>

In CSS:

.dataTableParentHidden {overflow:hidden;height:0px;width:100%;}

This solution hides the data table without using "display:none".

After the data table initialization you have to remove class from wrapper to reveal the table:

$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');

Answer 3

I think you should probably just load scripts in the _Layout.cshtml, after all that's what it's for. Partial views are really meant for segments that can be re-used in other areas or at the very least, rendered HTML content.

That being said, one easy thing to do would be to either hide the table until it's done loading or even hide it and show a progress indicator.

You could do something like:

// .loadTable() is some function that loads your table and returns a bool indicating it's finished
//  just remember to check this bool within the function itself as it will be called over and over until it returns true

while (!loadTable()) {

    // maybe show a progress bar

    if ($('#myTable').css('display') != 'none')) {
        $('#myTable').hide();    // if it isn't already hidden, hide it
    }  
}

// hide progress bar
$('#myTable').show();

UDPATE:

If the jQuery table plugin has a "success" or "finished" callback, just hide the table on page load and show it when it's done loading.

$(document).ready(function () {
    $('#myTable').hide();

    // run plugin and .show() on success or finished 
});

Answer 4

I had the same problem. Try this:

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");
        }

Answer 5

I did a very simple solution that works fine. In the DataTable initialization I used the method show():

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

... and in the HTML table I put the style display:none:

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

Good luck!

Answer 6

I know it's very old question, but maybe I can help someone in future, how know ... So after many hours I find the only solution that work's for me (table it will be loaded after it is rendered complete):

      <html>
                <head>
                    <style>
                    .dn {
                         display: none;
                    }
                </style>
                </head>
                <body>
                        <div id="loadDiv" class="firstDivClass secondDivClass">Loading...<div>
                        <table id="myTable" class="dn firstTableClass secondTableClass">
                             <tr><td>Something Here</td></tr>
                        </table>
                </body>


            <script>
         $(document).ready(function(){
    showMeTheTabel();
    });        
    function shoMeTheTable() {
            var dTable = $('#myTable').dataTable({
                "aoColumnDefs": [
                   {bla, bla}
                ],
                "oLanguage": {
                    "bla" : "bla"
                },
                "fnPreDrawCallback":function(){
                },
                "fnDrawCallback":function(){
                    $("#loading").addClass('dn'); 
                    $('#tabel').removeClass('dn');
                },
                "fnInitComplete":function(){
                    console.log("Complete")           // optional and Done !!!
                }
            });
    }
    </script>
     </html>