How to optimize data table with 400+ columns?

burney

Currently i'm facing an issue where i'm getting columns dynamically, which amount to 450+.
Its taking 1-2 mins to render the entire thing.
Are there any solutions to it? Currently my config looks like this

the order of the columns is loaded through the db and applied in the stateLoadCallback function

$('#searchResultTable' + (docView ? "DocView" : "PkgView")).DataTable({
columns: docView ? columnsDocView : columnsPkgView,
ajax: ajaxurl,
initComplete: function(settings, json) {
var ids = [""];
missingDocList = [];
$( !docView ? "#docViewDiv" : "#pkgViewDiv" ).css('display', 'none');
$( docView ? "#docViewDiv" : "#pkgViewDiv" ).css('display', 'block');
$( !docView ? "#docViewDiv" : "#pkgViewDiv" ).css('visibility', 'hidden');
$( docView ? "#docViewDiv" : "#pkgViewDiv" ).css('visibility', 'visible');
var api = this.api();
applyTableInit(api);
initCompleteApplySavedState.call(this, settings, json);
api.columns.adjust();
$("#loader").hide();
$('#maintablebody').css({'content-visibility': 'visible'});
$("#switch_button_toggle :input").attr("disabled", false);
document.getElementById("docradio").cursor = "pointer";
document.getElementById("pkgradio").cursor = "pointer";
document.getElementById("column_click" + (!docView ? "_pkg" : "")).value = "1";
},
infoCallback: function(settings, start, end, max, total, pre) {
return start + " to " + end + " of " + total + " documents ";
},
deferRender: true,
bFilter: true,
sDom: 't<"bttable"lp>i',
lengthMenu: [[10,25,50,100], [10,25,50,100]],
scrollY: "610px",
scrollX: true,
scrollCollapse: true,
responsive: true,
order: [],
colReorder: true,
stateSave: true,
autoWidth: false,
stateSaveCallback: stateSaveCallback,
stateLoadCallback: stateLoadCallback,
// serverSide: true,
paging:true,
oLanguage: { sEmptyTable: prompt, oPaginate: { sPrevious: "<", sNext: ">" } }
});

allan

DataTables has a lot of optimations for large numbers of rows, but less so for columns.

The biggest impact on peformance is going to be the scrolling features. Disable them and you should see a different.

If you are able to link to your page, I'll profile it and see if there are any optimisations I can readily put in.

Allan

mattewwade06

Rendering 400+ columns in 1–2 minutes definitely signals a performance bottleneck. You might consider showing only a subset of columns initially and loading the rest on demand, or better yet, enabling server-side processing to drastically reduce rendering time. These approaches can help keep the UI responsive even with huge tables.