Lazy loading on datatable with REST ws on ajax call

Lazy loading on datatable with REST ws on ajax call

MajesticMajestic Posts: 14Questions: 7Answers: 0
edited January 10 in Free community support

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: [
         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>&nbsp&nbsp&nbsp<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>&nbsp&nbsp&nbsp<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 ?

Sign In or Register to comment.