+ Start a Discussion
Harika B 21Harika B 21 

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
MandyKoolMandyKool
Hi Harika,

You might have already written "afterscriptsLoaded" function in controller of your component. But just make sure that you remove comma at the end of the function (on line 78 above). I guess that is what is causing this issue.

Hope that solves your problem.
 
Javier SánchezJavier Sánchez
Hi Harika!
I have seen that you use the pdfMake js library in your lightning component.
I have some issues with this library, I try to load it with the ltng:require tag but the script in afterScriptsLoaded never fires and I don't know why! Did you change something in the js library?