Loading a datatable withouth blocking the main thread

Question

I am currently building a small webpage, which includes a datatable with currently around 10.000 entries. My problem is that populating the datatable blocks the main thread for a few seconds, which results in the webpage being unresponsive for quite some time. Is there any way to fix this behavior by maybe asynchronously populating the datatable?

Initialization works like this:

$(document).ready(function () {
    // load all kinds of other charts/data
    // ...        
    loadDataTable();
});  

function loadDataTable(){
    $.ajax({
      type: "GET",
      url: /* url to make an API call to the node backend */,
      dataType: "json",
      success: function(response) {
        initDataTable(response)
      }
    });
}


function initDataTable(data){
    $(/*id of the data table*/). DataTable({
        sScrollX: "100%",
        data: data.data,
        columns: [
            { data: /* data selection */ },
            { data: /* data selection */ },
            { data: /* data selection */ },
            { data: /* data selection */ },
            { data: /* data selection */ }
        ]
    });
}

Full source code: https://github.com/fbaierl/bundeszirkus-server/blob/master/public/index.html

Edit: This link provided the correct solution for me: https://datatables.net/examples/server_side/simple.html (thanks Valentin Silvestre)

Yes you can use `web-workers` which work on a separate thread, take a look at this pretty (old) article https://www.html5rocks.com/en/tutorials/workers/basics/ Also this thread is helpful https://stackoverflow.com/questions/9708113/since-javascript-is-single-threaded-how-are-web-workers-in-html5-doing-multi-th — t3__rry, Jul 10 '18 at 14:32

score 1 · Accepted Answer · answered Jul 10 '18 at 14:29

This link say that 10k data isn't much to load, it's maybe coming from your API call or a bad code.

This page from documentation is giving other instructions to populate the database with AJAX. I think this will solve your issue.

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The link you provided eventually was the solution I was looking for. Had to adapt the AJAX and API call as well to only send slices of data. — Florian Baierl, Jul 10 '18 at 20:34

Loading a datatable withouth blocking the main thread

1 Answers1