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

That's why Ajax was created. You'll want to load the values using the Ajax option so that it queries a remote page where the records are served from. — RightHandedMonkey
– RightHandedMonkey, Commented Sep 19, 2012 at 23:14

Pauric Holleran · Accepted Answer · 2017-12-19 12:49:30Z

2

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

answered Dec 19, 2017 at 12:49

Pauric Holleran

451 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RightHandedMonkey · Accepted Answer · 2012-09-19 23:56:42Z

Remove any data in your HTML file and leave it empty. This way your page loads right away. The Ajax source will display a nice loading graphic while the data is being loaded into the page.

Below is the configuration for the plugin to use the Ajax source option.

$(document).ready(function() {
    $('#datatables').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'arrays.txt'
    } );
} );

Below is served from the arrays.txt where your data is served as a static file or perhaps you have server logic to create your data: arrays.txt

{
  "aaData": [
    [
      "Trident",
      "Internet Explorer 4.0",
      "Win 95+",
      "4",
      "X"
    ],
    [
      "Trident",
      "Internet Explorer 5.0",
      "Win 95+",
      "5",
      "C"
    ],
    [
      "Trident",
      "Internet Explorer 5.5",
      "Win 95+",
      "5.5",
      "A"
    ]
}

Collectives™ on Stack Overflow

JQuery datatables showing plain HTML page while loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related