Performance Issue with loading multiple DataTables in a single page

sauf1125

I need to load 10 dataTables in a single page, however, I am facing a performance issue whereby it takes the ard 10 seconds for all the tables to show. The performance in IE is even worse as it caused browser to hang for awhile before everything goes back to normal.

The way I am rendering these dataTables is by putting the initialize function in a for loop and looping it. As the data is retrieved from an API, I put this loop in an ajax request. Below is an example of my code. I didn't enable paging as the number of rows would at most be around 12.

$.get(api_url, function(data) {
  for (var index = 0; index < data.length; index++) {
    var this_data = data[index];

    $table[index] = $('.personal').on('processing.dt', function(e, settings, processing) {
      $('#processingIndicator').css('display', 'none');
      if (processing) {
        $(e.currentTarget).LoadingOverlay("show");
      } else {
        $(e.currentTarget).LoadingOverlay("hide", true);
      }
    }).DataTable({
      "data": this_data,
      'deferRender': true,
      "columns": [{
        "data": "dataOne"
      }, {
        "data": "dataTwo"
      }, {
        "data": "dataThree"
      }, {
        "data": "dataFour"
      }],
      paging: false,
      searching: false,
      ordering: false,
      info: false
    });
  }
});

I have searched the Datatables forum and have no luck in finding a solution to my problem. I wonder if there is any way to render the datatable asynchronously so as to prevent this lagging experience. Or is there a better way to do what I want to achieve.

kthorngren

It looks like the $.get() is fetching the data for all 10 tables in one request. Then you are looping through the data which presumably is an array of 10 datasets. If there are only 12 rows per table then that not much at all. Are you sure this is where the delay is at? I would start with timing the loop with something like this:

$.get(api_url, function(data) {
  var startTime = Date.now();
  for (var index = 0; index < data.length; index++) {
........
  }
  console.log('DT init complete in ', Date.now() - startTime + ' milliseconds.');
});

If you wanted to load each of the 10 Datatables asynchronously you want need to place the $.get() inside a for loop which loops each table. The $.get() request will then fetch each tables data individually. But I would start with timing the function first to verify that is the issue.

Let us know what you find.

Kevin

sauf1125

H have tried adding the logging @kthorngren. The picture below is the result.

However I noticed that... It took the page close around 3 seconds to render the first table after all the logging is completed. Any advice would be appreciatied.

With regards to putting the fetch request in a loop, I am afraid that doing so would might cause a bottleneck in the network. Correct me if I am wrong here.

kthorngren

I expected to see only one line of output by putting the console.log statement after the for loop.

With regards to putting the fetch request in a loop, I am afraid that doing so would might cause a bottleneck in the network. Correct me if I am wrong here.

You asked how to load each table asynchronously. This would be the way to do it. But if you are currently loading all the data with one request and that is not causing a performance issue then I wouldn't change anything. I don't think 10 network requests is going to cause network issues but it might depend on the network.

It took the page close around 3 seconds to render the first table after all the logging is completed. Any advice would be appreciatied.

Can you post a link to your page so we can see what you have? Otherwise you can try profiling the page to determine where the problem might be. Checkout this tutorial on profiling for one option:
https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/

Kevin