DataTables Loading and Rendering Delay

Question

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.

Answer 1

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

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

Answer 2

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.

Answer 3

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