+ Start a Discussion
Harika B 21Harika B 21 

send data into jquery data table from vf page through js remoting

Hi,

I am trying to show the data on jquery data table through js remoting. I am using this because i want to show more than 1k records in table. but my data is not going. one or the other error is coming. 

This is my code:
function rebuildTable_applyFilterTable() {
             
            j$('[id$="applyFilterTable"]').DataTable({
                "data" : JSON.parse('{!JSENCODE(payload)}'),
                "scrollY": "260px",
                "scrollCollapse": true,
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "dom": 'Bfrtip',
                "buttons": [
                    'copy',
                    {extend: 'csvHtml5',title: 'Criteria export'},
                    {extend: 'excelHtml5',title: 'Criteria export'},
                    {extend: 'pdfHtml5',title: 'Criteria export'},
                    'print'
                ],
                "columns": [
                            { title: "SID" },
                            { title: "FirstName" },
                            { title: "LastName" },
                            { title: "StudentLog" },
                            { title: "ConsoleView" },
                            { title: "ListOfMajors" },
                            { title: "ListOfMinors" },
                            { title: "GPA" },
                            { title: "CreditHours" },
                            { title: "CurrentCreditHours" },
                            { title: "Privacy" },
                            { title: "CurrentlyEnrolled" }
                        ]
            } );
        }

 Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.adv_CriteriaCreateController.getContacts}',
                 rateOverrideArray[0],
                '{!sortExpression}',
                '{!sortDirection}',
                function(result, event){
                    if (event.status) {
                       
                        // var html = $("#contactTableRowTmpl").render(result);
                        //document.getElementById("#contactTableRowTmpl").innerHTML = result;
                      
                        //replace the table body with rendered html
                        //$("#contactTableBody").html(document.getElementById("#contactTableRowTmpl").innerHTML);
                       
                        rebuildTable_applyFilterTable();
                        
                        
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML = 
                            event.message + "<br/>\n<pre>" + event.where + "</pre>";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                }, 
                {escape: true}
            );

This result is getting data , i checked about it.

how do i push it to table?​ I am not saying use the below table but i even tried the js script as well. can you make it work?
<table id="applyFilterTable" />

 
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello Harika,

Try passing the results as a parameter while building your table. Addionatilly, given this scenario you have to add the property "destroy" while building your table to avoid unexpected behavior. Look at the example below where the signature of the method rebuildTable_applyFilterTable was changed to receive the results and the property "destroy" was added to the table:
 
// Signature change
function rebuildTable_applyFilterTable(result) {
             
            j$('[id$="applyFilterTable"]').DataTable({
                "data" : JSON.parse('{!JSENCODE(result)}'),
                "scrollY": "260px",
                "scrollCollapse": true,
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "dom": 'Bfrtip',
				"destroy" : true, // Destroy option
                "buttons": [
                    'copy',
                    {extend: 'csvHtml5',title: 'Criteria export'},
                    {extend: 'excelHtml5',title: 'Criteria export'},
                    {extend: 'pdfHtml5',title: 'Criteria export'},
                    'print'
                ],
                "columns": [
                            { title: "SID" },
                            { title: "FirstName" },
                            { title: "LastName" },
                            { title: "StudentLog" },
                            { title: "ConsoleView" },
                            { title: "ListOfMajors" },
                            { title: "ListOfMinors" },
                            { title: "GPA" },
                            { title: "CreditHours" },
                            { title: "CurrentCreditHours" },
                            { title: "Privacy" },
                            { title: "CurrentlyEnrolled" }
                        ]
            } );
        }

 Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.adv_CriteriaCreateController.getContacts}',
                 rateOverrideArray[0],
                '{!sortExpression}',
                '{!sortDirection}',
                function(result, event){
                    if (event.status) {
                        // Passing the results
                        rebuildTable_applyFilterTable(result);
                        
                        
                    } else if (event.type === 'exception') {
                        document.getElementById("responseErrors").innerHTML = 
                            event.message + "<br/>\n" + event.where + "";
                    } else {
                        document.getElementById("responseErrors").innerHTML = event.message;
                    }
                }, 
                {escape: true}
            );

I don't know how you are returning your results, usually, there is no need to parse it but I guess you needed and that's ok. For further improvement changes, I would consider constructing the table when loading your VF and then only re-drawing it when loading data through the remoting action, unless you number of columns is also mutable, in that case, re-building the table would be the only solution using the same selector.

Check more about the "destroy" option at: https://datatables.net/reference/option/destroy 

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.


 
Harika B 21Harika B 21
Hey Zuinglio,

I was trying both ways of using remote action and parsing the data but went with remote action. Thank you with destroy. It helped.
Although my data is not being displayed and that is the main issue.

i have tried to add 
"data" : data
this one did not work, so I have changed the table like this
 
function rebuildTable_applyFilterTable(data) {
            
            j$('[id$="applyFilterTable"]').DataTable({
                //"data" : data,
                "scrollY": "260px",
                "scrollCollapse": true,
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "dom": 'Bfrtip',
                "destroy" : true,
                "buttons": [
                    'copy',
                    {extend: 'csvHtml5',title: 'Criteria export'},
                    {extend: 'excelHtml5',title: 'Criteria export'},
                    {extend: 'pdfHtml5',title: 'Criteria export'},
                    'print'
                ],
                "columns": [
                           
                            { title: "FirstName" },
                    		{ "data": data.FirstName },
                            { title: "LastName" },
                    		{ "data": data.LastName }
                		]
            } );
        }

this is not displaying data but data is there. is there any way we can do it?

 
Harika B 21Harika B 21
ohh one more thing, i am geting data from contacts and it has 10 fields and 2k records in it to display