Serverside requests and pagination issue (?)

kgprasad

Hello, I am testing the use of serverside pagination. For this particular example I have 17 records and (1 to 10) returned in the first request to server. I hit the next button and the server get a request for 10 more (start=10 and length=10) , so I send 10 thru 17, and

The browser just freezes after it get the response, with the alert/message "Processing" .

FYI these are the values set in the response ..
recordsTotal = 17 // remains at 17
recordsFiltered = 17 // I tried 7 as well and the browser just hangs

I am not sure the freeze is because of the recordsFiltered value .. I am attaching my JS code below, any help appreciated. Thanks.

=================JS snippet, sorry bit long ! =====================

$(document).ready(function() {
$('#lidarSaas').DataTable( {
dom: 'Bfrtip',
buttons: [
'columnsToggle'
],
"processing": true,
"serverSide": true,
"ajax": {
"url": "http://127.0.0.1:8000/lidarSaas/uploads",
"dataType" :"json",
"dataSrc": "data"
},
columns: [
{ "data": "id",
render: function (data, type, row) {
btnId = data;
return data;
}
},
{ "data": "title" },
{
"data": "uploadTimestamp",
render: function ( data, type, row ) {
// If display or filter data is requested, format the date
if ( type === 'display' || type === 'filter' ) {
return data.substr(0, data.indexOf('.'));
}

              // Otherwise the data type requested (`type`) is type detection or
              // sorting data, for which we want to use the integer, so just return
              // that, unaltered
              return data;
          }
        },
        { "data": "uploadFileNameS3" },
        {  
          "data": "processedTimestamp",
          render: function ( data, type, row ) {
              // If display or filter data is requested, format the date
              if ( type === 'display' || type === 'filter' ) {
                return data.substr(0, data.indexOf('.'));
              }

              // Otherwise the data type requested (`type`) is type detection or
              // sorting data, for which we want to use the integer, so just return
              // that, unaltered
              return data;
          }
        },
        { "data": "processedFileNameS3" },
        {   
           "data": "status",
           render: function(data, type, row) {
             // Dynamically add buttons indicating the rowId in the DB for easy 
             // reference when the function needs to be executed with that rowId 
             // on the server side
             if (data == 'Processing') {
                 return '<button type="button" onclick="handleStop(btnId)">Stop</button>';
             }
             if (data == 'Processed') 
                 return '<button type="button" onclick="handleRepeat(btnId)">Repeat</button>';
             if (data == 'Process Failure') 
                 return '<button type="button" onclick="handleRepeat(btnId)">Repeat</button>';
             if (data == 'Uploaded') 
                 return '<button type="button" onclick="handleProcessing(btnId)">Process</button>';
             return data;
           }
        },
        { "data": "processingTime" },
        { "data": "owner" },
    ],
} );

} );

allan

Why are you using server-side processing with only 17 records? You only see benefit when you have at least tens of thousands of records.

Having said that, my guess is that the draw parameter isn't being returned, but without a test case it is hard to say for certain.

Allan