+ 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.