Increase performance of Data Table construction

Hedma

I'm measuring it takes ~3 Secs for Data Table constructor to complete with around 3000 objects:

        t_ini = Date.now();
        $('#myTable').DataTable(myTable);
        t_fin = Date.now();
        console.log("[DataTable()] " + (t_fin - t_ini));   // ~3 Seconds

However, I know that the data is retrieved much faster, the bottleneck is in the construction.

The table object looks like this:

// Printing the table object to the browser JavaScript console:
{...}
aaData: Array(3796) [ {…}, {…}, {…}, … ]
aaSorting: Array []
aoColumns: Array(20) [ {…}, {…}, {…}, … ]
bPaginate: true
bStateSave: true
buttons: Array [ {…} ]
columns: Array(20) [ {…}, {…}, {…}, … ]
data: Array(3796) [ {…}, {…}, {…}, … ]
dom: "Bfriptlip"
fnInitComplete: function initComplete()​
fnRowCallback: function rowCallback()​
initComplete: function initComplete()​
language: Object { search: "_INPUT_", searchPlaceholder: "Search table" }
oLanguage: Object { search: "_INPUT_", searchPlaceholder: "Search table", sSearch: "_INPUT_", … }
order: Array []
paging: true
rowCallback: function rowCallback()
sDom: "Bfriptlip"
select: Object { style: "multi" }
stateSave: true

I know of the AJAX option, but before working on that I would like to see if there is something hughly underperforming in my object. The reason for this is because I know that the data fetching is likely not the problem.

Thanks for any insight on this.
Martin

kthorngren

Start with this speed optimization FAQ.

Kevin