Salesforce Developer Community

Chatter

Feed
0

Best Answers
1

Likes Received
0

Likes Given
3

Questions
5

Replies

put data into jquery data table in vf page.

Hi,

I have a table like below

<table id="applyFilterTable" class="table table-bordered table-condensed table-responsive" cellspacing="0" width="100%" />

I have called the table to show jquery data table and it is working as long as i dont put data into it.

I am trying to add data in multiple ways see the code below.

function rebuildTable_applyFilterTable(data) {
         console.log('inside table'+data[0].EID__c);
         var dataset = [];
         for(var i=0;i<data.length;i++){
             var ds = [];
             ds.SID = data[i].EID__c;
             ds.Name = data[i].Name;


             dataset.push(ds);
         }
        j$('[id$="applyFilterTable"]').DataTable({
            //"data" : dataset,
            "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: "EID",data:dataset.EID},
                        { title: "Name",data:dataset.Name}

                    ]
        } );
    }

my data set variable has data in it.
1)i tried data:dataset which is throwing me the following error.

DataTables warning: table id=applyFilterTable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

2)if i add the above code of adding data along with title it is not at all showing and not even throwing any errors.

is there a way that my page will not fail. all i need is how to add data

Harika B 21
March 20, 2018
Like
0

2 replies

jquery data table in lightning component

I'm trying to add a jQuery data table in Salesforce lightning component. Here is the code. It is not loading at all. What am I doing wrong?

<ltng:require scripts="{!join(',','//cdn.datatables.net/1.10.4/css/jquery.dataTables.css'
                        ,'//code.jquery.com/jquery-1.12.4.js'
                        ,'//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js'
                        ,'//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'
                        ,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js'
                        ,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js')}"
            afterScriptsLoaded="{!c.afterscriptsLoaded}"/>

or

<ltng:require scripts="{!join(',',$Resource.datatable + '/DataTables-1.10.16/css/jquery.dataTables.css'
                           ,$Resource.datatable + '/jQuery-1.12.3/jquery-1.12.3.js'
                            ,$Resource.datatable + '/DataTables-1.10.16/js/jquery.dataTables.min.js'
                           ,$Resource.datatable + '/Buttons-1.5.1/js/dataTables.bootstrap.min.js'
                            ,$Resource.datatable + '/Buttons-1.5.1/js/buttons.flash.min.js'
                            ,$Resource.datatable + '/JSZip-2.5.0/jszip.min.js'
                            ,$Resource.datatable + '/pdfmake-0.1.32/pdfmake.min.js'
                            ,$Resource.datatable + '/pdfmake-0.1.32/vfs_fonts.js'
                            ,$Resource.datatable + '/Buttons-1.5.1/js/buttons.html5.min.js'
                            ,$Resource.datatable + '/Buttons-1.5.1/js/buttons.print.min.js')}"
              	afterScriptsLoaded="{!c.afterscriptsLoaded}"/>



<table id="showContacts" class="slds-table slds-table--bordered slds-table--cell-buffer">
          <thead>
            <tr class="slds-text-title--caps">

                <th class="slds-is-sortable slds-text-title--caps">

                  <span class="slds-truncate" title="EID">EID</span>  

               </th>

               <th class="slds-is-sortable slds-text-title--caps">

                  <span class="slds-truncate" title="Name">Name</span>

               </th>
          </tr>
  </thead>
  <tbody>
      <tr>
         <td scope="row">
             <div class="text-wrap">10887738</div>
         </td>
         <td>
            <div class="slds-truncate  text-wrap" title="Adam Will"><a href="javascript:void(0);">Adam, Will</a></div>
         </td>
    </tr>
</tbody>
</table>


({
afterscriptsLoaded : function(component,event,helper){
    j$('[id$="showContacts"]').DataTable({
            "scrollY": "260px",
            "scrollCollapse": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "dom": 'Bfrtip',
           "destroy" : true,
            "buttons": [
                        'copy',
                        {extend: 'csv',title: 'Criteria export'},
                        {extend: 'excel',title: 'Criteria export'},
                        {extend: 'pdf',title: 'Criteria export'},
                        'print'
            ]
        } );
},


})

My question is about how to show this table on lightning component in Salesforce? Whenever I load the page I see a blank page.
Note: I am showing a sample table. this is not the total table

Harika B 21
March 19, 2018
Like
1

3 replies

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" />

Harika B 21
March 16, 2018
Like
0