How DataTables Handles Loading and Rendering Time Delay

Question

How DataTables Handles Loading and Rendering Time Delay

Utilizing DataTables in conjunction with Bootstrap 4 for client-side processing while displaying approximately 2,000 records.

The loading time is acceptable, but upon refreshing the page (F5), I observe an unformatted DataTable briefly appearing. It seems like DataTables is the last element to load, making it quite noticeable.

For a demonstration, check out their 'Zero configuration' example. Upon refreshing the page, you can catch a glimpse of all the table records momentarily (you have to be quick!).

This issue is also apparent in the 'Bootstrap 4' example.

I have a couple of inquiries:

Why does this occur?
Is there a way to prevent it?

I've attempted rearranging my JS and CSS files (of which I have few), but it has had no impact. My concern is that as I add more records, the loading time will increase, making the unformatted DataTable more evident with each page load.

javascript jquery css twitter-bootstrap datatables

Answer 1

Answer №1

It appears that many others have encountered the same problem. This issue seems to be quite common, especially with DT.

For a helpful solution, check out this response Datatables - on page load, table layout does not load instantly

Answer 2

It appears that many others have encountered the same problem. This issue seems to be quite common, especially with DT.

For a helpful solution, check out this response Datatables - on page load, table layout does not load instantly

Answer 3

Answer №2

If you examine the Bootstrap 4 example you provided closely, you'll find a clue hidden within the code.

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

This code snippet indicates that when the document has finished loading, it will transform the element with the id example into a DataTable format.

To prevent this behavior, one workaround is to set the table's style to display: none.

Afterwards, you can include $('#example').show() in the code to reveal the table once it has been converted into a DataTable.

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

Answer 4

If you examine the Bootstrap 4 example you provided closely, you'll find a clue hidden within the code.

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

This code snippet indicates that when the document has finished loading, it will transform the element with the id example into a DataTable format.

To prevent this behavior, one workaround is to set the table's style to display: none.

Afterwards, you can include $('#example').show() in the code to reveal the table once it has been converted into a DataTable.

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

Answer 5

Answer №3

In my opinion, it is not acceptable to have a long loading time when rendering 2000 rows or more. While loading time may be fine on PCs and laptops, it poses a problem for mobile devices. Have you tested this already?

Datatable is an excellent plugin with many options. You can initially render only 10 rows, and then request Datatable to draw and render additional pages when the user wants to see more. To achieve this, you need to use a data property like the one shown below:

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

By using this method, only 10 rows are rendered in the HTML code initially.

Answer 6

In my opinion, it is not acceptable to have a long loading time when rendering 2000 rows or more. While loading time may be fine on PCs and laptops, it poses a problem for mobile devices. Have you tested this already?

Datatable is an excellent plugin with many options. You can initially render only 10 rows, and then request Datatable to draw and render additional pages when the user wants to see more. To achieve this, you need to use a data property like the one shown below:

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

By using this method, only 10 rows are rendered in the HTML code initially.

How DataTables Handles Loading and Rendering Time Delay

Answer №1

Answer №2

Answer №3

Similar questions

Cannot see the created item in Rails application when using RSpec, Capybara, Selenium, and JavaScript

What is the best way to convert exponential values to decimals when parsing JSON data?

Experiencing problems with npm and bower installations, along with deprecated modules while setting up angular-phonecat project

The spawn function in the child_process module throws an error with the code -2, specifically the

Executing a JavaScript function to interact with a nodeJS HTTP server

CSS modified after opening a modal dialog that has loaded external HTML content

Generating conference itinerary - establishing agenda function (Sequelize)

Tips for restricting the voting feature on a Facebook App to only once every 24 hours

Guide on Importing All Functions from a Custom Javascript File

prompting the JavaScript hangman game to identify the letters in the "selected word"

Tips for creating Card-Title responsiveness across various screen dimensions with Bootstrap 4

Hide the selection box when hovering over the Div

Transferring a variable value between functions using autocomplete and AJAX communication

The concept of CSS "preload" animation

"Converting HTML code into visual templates for browser display - a step-by-step guide

Adjusting the properties of an Image Object using jQuery

Header frame is not valid

Is it possible to activate the onChange event when the input value is being modified by the state with information obtained from a fetch

Accessing a global variable within a jQuery .each function

Retrieve Content from a Different Web Page Using Ajax