jQuery DataTables - Slow initiation, “Normal” html table shown in the beginning

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

Answer 1

• The following is a node.js handlebars example. However, you can render the data using whatever web front-end framework you are using.
• If you're using bootstrap you can hide the table initially using the hidden class or alternatively hide the elements manually.
• Then in the initComplete callback you can then use jQuery to remove the hidden class to display the table only once it has loaded completely.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<table id="stocktable" class="table hidden">
<thead>
  <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Street Address</th>
    <th>State</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  {{#each devices}}
    <tr id="{{id}}">
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{age}}</td>
      <td>{{street_address}}</td>
      <td>{{state}}</td>
      <td>{{country}}</td>
    </tr>
  {{/each}}
</tbody>
</table>

<script>
  $(document).ready(function() {
    $('#stocktable').DataTable({
      columns: [{
          person: 'first_name'
        }, {
          person: 'last_name'
        },
        {
          person: 'age'
        },
        {
          person: 'street_address'
        },
        {
          person: 'state'
        },
        {
          person: 'country'
        }
      ],
      initComplete: function() {
       // Unhide the table when it is fully populated.
       $("#stocktable").removeClass("hidden");
      }
    });
  });
</script>

For example:

Answer 2

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 3

This is due to the ColVis plugin. remove the "W" from the sDOM and your table rendering will fly (albiet withou dropdowns)

Answer 4

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 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

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');