I have a table with 12 columns and 3000 rows which is experiencing performance issues. It takes a full minute and a few seconds for DataTables to render the table (This is after the data is already returned to the screen, so I know the query and network are not issues). Due to business requirements I cannot use paging, therefore, DataTables is having to render all 3000 records. My JSP creates the HTML DOM table and then it is initialized like so:
$("#OrderHistoryTable2").dataTable({
"paging": false,
"ordering": true,
"info": true,
"filter": true,
"length": true,
"processing": true,
"dom": 't<"bottom"if><"clear">',
"scrollY": "200px",
"scrollX": true,
"columnDefs": [
{ "orderData": [], "targets": 0 }, //TURN OFF DEFAULT SORTING OF TABLE
{ "orderable": false, "targets": 0 } //TURN OFF SORTABLILITY FOR COLUMN 1
],
"language": {
"search": "filter:",
"info": " _TOTAL_ items ",
"infoEmpty": "0 items "
}
});
I read that it would be faster if I used ajax instead of making DataTables convert the DOM. As a result, I have changed the JSP to only generate the <thead> section of the table. My initialization code now looks like this:
$("#OrderHistoryTable2").dataTable({
"paging": false,
"ordering": true,
"info": true,
"filter": true,
"length": true,
"processing": true,
"dom": 't<"bottom"if><"clear">',
"scrollY": "200px",
"scrollX": true,
"columnDefs": [
{ "orderData": [], "targets": 0 }, //TURN OFF DEFAULT SORTING OF TABLE
{ "orderable": false, "targets": 0 } //TURN OFF SORTABLILITY FOR COLUMN 1
],
"language": {
"search": "filter:",
"info": " _TOTAL_ items ",
"infoEmpty": "0 items "
},
"ajax": {
"url": "/app/getOrderHistoryData",
"dataSrc": "list",
"type": "GET"
},
"columns": [
{"data": "Column1"},
{"data": "Column2"},
{"data": "Column3"},
{"data": "Column4"},
{"data": "Column5"},
{"data": "Column6"},
{"data": "Column7"},
{"data": "Column8"},
{"data": "Column9"},
{"data": "Column10"},
{"data": "Column11"},
{"data": "Column12"}
],
"deferRender": true
});
With these changes DataTables is now rendering the table in 16 seconds. This is much better than it was, but 16 seconds is still a long time to wait for a screen to render.
Is this the best I can hope for since I am not able to use paging or can I do more to improve the performance?