DataTable with serverside processing is not reloading the data in the table

ligish

Hi,

I'm using a DataTable with serverside : true, and ajax POST in a angularJS application. User will be provided with a dynamic URL (via e-mail), and when the user opens it, it loads the datatable first, and a modal window will pops up.
The URL contains a specific value that is used for loading the data in the modal window. The menu in the web page has a menu item, that loads the page just with datatable alone (without modal window).
So, basically these are the two view options for the user in this page (1. With modal window on top of datatable 2. just the datatable without modal window). The sample URLs for these two views are like (the URLs are same, just the params are different),

1. With modal window - http://host:port/app/#/dashboard/d862078a-3900-4ef9-b048-5a0f97242b5e

2. Without Modal window (just the datatable) - http://host:port/app/#/dashboard/:id

   It works just fine on the first access of the URL - the table loads all data, and then the modal pops up. The issue is that, when the user navigates back to the second URL from the modal specific URL by selecting the menu item in the page, the table is NOT loading the data.
   The AJAX call is submitted, and the JSON data is returned, but the data is not getting loaded in the table.
   I tried to draw the table with JSON data in initComplete method, but it didn't work. Either I have to refresh the page OR navigate to a different page in the application, and come back to this page, the table loads the data just fine.

   I have tried "retrieve" : true option, but it didn't trigger the AJAX post request when the URL is changed.

   $('#dashbrdGridID').DataTable({

           "dom": 'B<"clear">lfrtip',
           "processing": true,
           'order': [], //no default ordering
           "buttons": [
                       {extend: 'colvis',
                        collectionLayout: 'fixed two-column',
                        columns: ':gt(9)',
                        text: 'Show/Hide Column'
   
                       }
                   ],
           "serverSide": true,
           "searchDelay": 2000,
           "paging": true,
           "destroy": true,
           "ajax" : {
               "type": "POST",
               "url" : "/rest/ui/v1/empList",
               "datatype" : "json", //return
               "contentType" : "application/json; charset=utf-8", //send
               "data": function (data) {
   
                   return JSON.stringify(data);
   
               },
               "complete": function(data) {
   
               },
               beforeSend: function (xhr) {
   
               },
               error : function (jqXHR, textStatus, errorThrown) {
                   console.log("Error!");
                   var obj = jQuery.parseJSON(jqXHR.responseText);
                   if (obj && obj.Error) {
                       console.log("Error while fetching the data from database!");
                   }
               }
   
           },
           "columns": [
   
                       {data: 'COR_ID',
                           "visible" : false},
   
   
                       { data: 'DATE' },   
                       ......
                       ],
           "language": {
               "loadingRecords": "<img src='images/Loading.gif'> Loading...",
               "processing": "<img src='images/Loading.gif'> Processing..."
               }, 
   
           "autoWidth": false,
           "scrollCollapse": true,
           "jQueryUI": true,
           "search": {"caseInsensitive": true},
            "iDisplayLength": 2,
            "paging" : true,
            "info":true,
            "lengthMenu": [2, 4, 8, 10],
            "sPaginationType": "full_numbers",
            "scrollY": "60vh",
            "scrollX": "100%",
            "scrollCollapse": true,
            "initComplete": function(settings, json) {
   
                console.log("initComplete json:" + json.toSource());
   
                var tableData = $('#dashbrdGridID').DataTable().rows().data();
                console.log("tableData.length:" + tableData.length);
                if(tableData.length <= 0) {
                    console.log("draw table");
                    $('#dashbrdGridID').DataTable().rows.add(json).draw();
                }
   

could somebody please help to figure out what am I doing wrong here? Thanks in advance.

ligish

I'm facing this issue only when the server side processing is enabled and the data source is AJAX. Otherwise the table loads just fine when I navigate between the same URLs with different URL params (meaning, the web page that I'm trying to access is same, but the page will have different functionalities based on the URL param) . I need the serverside processing enabled because this table has to support millions of records.

retrieve : true option is not re-triggering the ajax POST.
destroy : true is triggering the ajax post request, but the json data is not rendering in the table.

So, the question is why the table is not rendering the data when the AJAX response has JSON data. I also, tried ajax.reload( null, true ), but no success.

Any help would be appreciated. thanks.

As a temp fix, I'm reloading the whole page using location.reload(true) when the table is not loading the data.

if ( $.fn.dataTable.isDataTable( '#dashbrdGridID' ) ) {

            dashboardtable = $('#dashbrdGridID').DataTable();
            console.log("dashbrdGridID is already initialized");                
                 location.reload(true);

        }
        else {

            console.log("DashboardGridID initialization");

            dashboardtable = $('#dashbrdGridID').DataTable({
            "dom": 'B<"clear">lfrtip',
            "processing": true,
            'order': [], //no default ordering
            "buttons": [
                        {extend: 'colvis',
                         collectionLayout: 'fixed two-column',
                         columns: ':gt(9)',
                         text: 'Show/Hide Column'

                        }
                    ],
            "serverSide": true,
            "searchDelay": 2000,
            "paging": true,
            "destroy": true,
            "ajax" : {
                "type": "POST",
                "url" : "/rest/ui/v1/empList",
                "datatype" : "json", //return
                "contentType" : "application/json; charset=utf-8", //send
                "data": function (data) {

                    return JSON.stringify(data);

                },
                ......