I am using DataTables with Bootstrap 4 and client side processing. Displaying around 2,000 records.

The loading time is acceptable, however I notice that when I reload the page (F5) I can see an un-formatted DataTable for a split second. It's almost as if DataTables is the last thing to load, and it's quite obvious.

If you look at their 'Zero configuration' example you can see what I mean. When reloading the page you can actually see all the table records for a split second (you have to be quick!).

There is a 'Bootstrap 4' example, also noticeable on that page.

I have a few questions;

• Why does this happen?
• Is there anything I can do to prevent it?

I have tried re-ordering my JS and CSS files (I only have a few) however it has made no difference. My concern is that as I add more records the loading time will increase and the un-formatted DataTable will be more obvious on each page load.

I am using DataTables with Bootstrap 4 and client side processing. Displaying around 2,000 records.

The loading time is acceptable, however I notice that when I reload the page (F5) I can see an un-formatted DataTable for a split second. It's almost as if DataTables is the last thing to load, and it's quite obvious.

If you look at their 'Zero configuration' example you can see what I mean. When reloading the page you can actually see all the table records for a split second (you have to be quick!).

There is a 'Bootstrap 4' example, also noticeable on that page.

I have a few questions;

• Why does this happen?
• Is there anything I can do to prevent it?

I have tried re-ordering my JS and CSS files (I only have a few) however it has made no difference. My concern is that as I add more records the loading time will increase and the un-formatted DataTable will be more obvious on each page load.

• javascript
• jquery
• css
• twitter-bootstrap
• datatables

• Datatables is the last thing to load on DOM plete. This is especailly true if your data source is from the HTML Table you are rendering. You need to create a class with hidden on it and then set that class on the table when the page loads. Then on your javascript, the very last thing, is remove that class. From the years I have used DT there is no "built in" feature for this. You have to manually control it. – Piotr Kula Commented Nov 13, 2017 at 17:06
• You will see the exact same behaviour with any other framework plugin which manipulates, alters or reorganizes thousands of elements loaded into the dom. There is no exceptions. For DataTables your workaround could be to initialise an empty dom <table> and use the built in ajax to load content. Then the DataTable instance will be showed instantly, and the delay is "passed on" to the row rendering. I.e no flicker but a small amount of time where you can see "loading data" (or a ajax load wheel or whatever) – davidkonrad Commented Nov 13, 2017 at 17:35
• If you have a very large JSON you can load up to myjson. I can produce an example using bootstrap 4. – davidkonrad Commented Nov 13, 2017 at 17:37

3 Answers 3

Someone had the exact same issue. Seems to be pretty mon, expesially with DT

See here for a good answer Datatables - on page load, table layout does not load instantly

The hint is in the code of the Bootstrap 4 example you linked.

$(document).ready(function() {
    $('#example').DataTable();
} );

This code states that when the document is ready (it has finished rendering HTML and CSS), take the element with the id example and turn it into a DataTable.

To prevent this you could set the style of of the table to display: hidden.

Then you can add $('#example').show() to the code to display the table again after it has been made into a DataTable

$(document).ready(function() {
    $('#example').DataTable();
    $('#example').show();
} );

In my opinion loading time cannot be acceptable for render 2000 rows(or more). Even if loading time is acceptable in PCs and laptops, there is problem for processing in mobiles. Did you test it already?

Datatable is a perfect plugin and has too many options. you can render just 10 rows in first view, and when the user want to see another pages, request from Datatable to draw and render them. So you need to use data property like this:

HTML:

    <table id="example" class="table table-striped table-bordered" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

JS:

var dataSet = new Array();
for(i=0;i<2000;i++){
    var item = new Array(
        "name "+i,
        "position "+i,
        "office "+i,
        "age "+i,
        "start date "+i,
        "salary "+i
    );
    dataSet.push(item);
}

tableMain = $("#example").DataTable({
    data: dataSet,
    columns: [
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true}
    ],
    pageLength: 10
});

As you see just 10 rows renders in HTML code via this method.