Datatable And Scroller Issues

sahildcoder

I am trying to render my Datatable with Scroller plugin in. Data is loading once but when scrolled further shows loading data only. Am I missing something ? I am trying to implement it in Salesforce Lightning

           sessionTable = $j('#table-1').DataTable(
            {
                "info": true,
                "searching": true,
               // destroy : true,
                "processing": false,
                "dom": '<"div-pg"pi><"div-search"f><"div-tbl">t<"bottom-info"> ', // f search, p :- pagination , l:- page length 
                //"data": '',
                 paging:true,
                "order" : [[2,"asc"]],
                "serverSide": true,

                //scrollY: "200px",
                scrollX : true,
                "ajax": function (data, callback, settings) {
                             var allRecs = component.get("c.runQuery");


                             allRecs.setParams(
                             {
                                "request" : data ,
                             });

                                allRecs.setCallback(this, function(response)
                                {
                                   console.log('in setCallback Populating Data' );
                                   /*console.log(response.getReturnValue());*/

                                   var state = response.getState();

                                    if(state === 'SUCCESS' && response.getReturnValue != null)
                                    {
                                        //callback(JSON.parse(response.getReturnValue()));
                                       //callback(sessionTable.rows.add(JSON.parse(response.getReturnValue())).columns.adjust().draw());

                                        var resp = JSON.parse(response.getReturnValue());
                                        console.log(resp);

                                        setTimeout( function () {
                                        callback( {
                                            draw:resp.draw,
                                            data: JSON.parse(resp.data),
                                            recordsTotal: resp.recordsTotal,
                                            recordsFiltered: resp.recordsTotal
                                        } );
                                             }, 200 );



                                }); 
                                $A.enqueueAction(allRecs); 
                    },


                scrollY:     "300px",
                scroller: {
                    loadingIndicator: true
                },
                scrollCollapse: true,

                "language":
                {
                    "emptyTable": "Loading Data"
                },

});

allan

Can you link to a test case showing the issue please?

Thanks,
Allan

sahildcoder

Here is what i get (as per image)
When i load for the first time this is what i get as response (console logs)

{recordsTotal: 193, recordsFiltered: 193, draw: 1, data: "[{"zip":"95608","tempUpdatedSalesDirection":null,"…tID":"0017F00000A47VsQAJ","accNum":"BH130044hdvsh"}]"}

allan

Thanks - however, can you link to a test case so I can attempt to debug it.

Allan

sahildcoder

Here is the Code. Little Data might be required to put in Random__c object

tangerine

Can you link to a test case showing the issue please?

sahildcoder

Dont know how to show you test case, Since the data is coming from Datatabase. Should i create sample database ?

allan

You might find this tech note useful.

If you need data from your database you would probably need to host the example page on your server, or reproduce the error without database provided data.

Allan

sahildcoder

Thanks for your help.
The issue was with Salesforce Lightning, it was not returning the response. Here is walkaround for this, we can force Salesforce to give response by adding following code after enqueuing:-

'''$A.enqueueAction(allRecs);
window.setTimeout(
$A.getCallback(function() {
console.log('Calling');
}), 200);'''