Lazy loading on datatable with REST ws on ajax call
Lazy loading on datatable with REST ws on ajax call
Hello,
I've a datatable which display more than 100K rows from DB and it takes a long time to load them all.
I'd like to introduce a lazy loading with pagination.
I've read : Deferred loading of data, Server-side processing 1, Server-side processing 2. But I'm not sure about how to use it so it does not work.
I load my datatable from an ajax call to a java WebService which returns a json. When I add the property "serverSide: true" it looks like it's loading data but never ends and never display them.
I'd like to know how should I proceed to "add" a lazy loading to my process.
Here's my datatable :
function drawTable(){
$.fn.dataTable.moment( 'YYYY-MM-DD HH:mm:ss.SSS' );
currentTable = $('#dataTables').DataTable({
responsive: false,
serverSide: true,
ajax: {
"url": restURI + 'orch/search/events/',
"contentType": "application/json",
"type": "POST",
"data": function ( d ) {
return JSON.stringify(getDatasToSearch());
},
error: function(jqXHR, textStatus, errorThrown){
manageAjaxError(jqXHR, textStatus, errorThrown)
}
},
buttons: [
'selectAll',
'selectNone'
],
language: {
buttons: {
selectAll: "Select all items",
selectNone: "Select none"
}
},
select: {
selector: 'td:first-child',
style: 'multi'
},
order: [0, 'desc'],
aLengthMenu: [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
iDisplayLength: 25,
"columns": [
{ "data": "EVENT_ID", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "FLOW_ID", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "FLOW_NAME", "defaultContent": "", "sClass": "text-center limitedWidthFlNm" },
{ "data": "OBJECT_TYPE", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "OBJECT_NAME", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "OBJECT_VERSION", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "OBJECT_ITERATION", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "OPERATION_NAME", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "OPERATION_STATUS", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "OPERATION_MESSAGE", "defaultContent": "", "sClass": "text-center limitedWidth" },
{ "data": "CREATE_DATE", "defaultContent": "", "sClass": "text-center limitedWidth"},
{ "data": "UPDATE_DATE", "defaultContent": "", "sClass": "text-center limitedWidth " },
{ "data": null, "defaultContent": "<i class=\"fa fa-folder-open blue inline\" title=\"Explore files\"></i>   <i class=\"fa fa-eye blue inline\" title=\"Audit event\"></i><br/><i class=\"fa fa-retweet\" aria-hidden=\"true\" title='Resubmit this event'></i>   <i class=\"fa fa-ban\" aria-hidden=\"true\" title='Cancel this event'></i>", "bSortable": false, "sWidth": "85px", "sClass": "text-center unselectable limitedWidth"}
]
});
}
Let me know if you need more information. Many thanks !
Edit : adding "deferRender": true reduce the time from 1m45 to 38 sec. Is it possible to have something better ?