JQuery datatables showing plain HTML page while loading

Question

Can someone please help me with this code? I'm facing problem i.e plain html page showing up in the beginning. I noticed that with smaller query like 100 records, it works fine but with larger queries like 8000. It shows entire table as plain html table while loading in the beginning and then works normally.

        $(document).ready( function () {
            var oTable = $('#datatables').dataTable( {
                "bJQueryUI": true,
                "sScrollY": "300px",
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bScrollCollapse": true,
                "bPaginate": true,
                "aaSorting":[[0, "asc"]],
                "sPaginationType":"full_numbers",
            });
            new FixedColumns( oTable );
        });

Answer 1

First of all, set your table to hidden by default:

<table id="#datatables" hidden>

Then include the initComplete callback in the $().DataTable() constructor. This will run only after all of the data has been loaded, so you can then set your table to $().show():

$('#datatables').dataTable( {
  "initComplete": function(settings, json) {
     $('#datatables').show();
     }
} );