jQuery datatable logo

How To Use jQuery DataTable Plugin In Salesforce Lightning Component -: Sample

piyush soni Lightning Component

View As Lightning Web Component

jQuery DataTables is a very powerful plugin for creating table with advanced interaction controls. It provides searching, sorting, pagination  and many more cool features without any configuration. In this post we are going to learn how we can use this jQuery datatable in salesforce lightning components.

Check Also : Data Table With Show/Hide Columns Dynamically In Lightning Component

So in this sample post, we will fetch the opportunity object records from server and after that display those records using jQuery data table.

Step 1 : Download & Upload jQuery library and  jQuery data table plugin, in static resource.

In order to use data table jQuery plugin, you must include the jQuery, javaScript and CSS file on your Lightning Component via static resources.

Download Data Table jQuery Plugin
Download jQuery library [version 2.2.4 Recommended]
  • jQuery version 2.2.4 is NOT included within the dataTable plugin zip file – you must download it.
  • Go to below link for download JQuery 2.2.4 minified version. (2.2.4 Recommendation)
  • https://code.jquery.com/jquery-2.2.4.min.js
  • For download jQuery file right click on the page and click on save as… link OR press CTRL + S button on keyboard.

  • Save the JS file on your computer.
Step 2 : Upload Data Table zip file + jQuery js file as a static resources in your Salesforce org.

Static resource is a file or collection of files that is stored on Salesforce. Once your Data Table zip file and jQuery2.2.4 JS file  is added as a static resource, it can be referenced by any of your lightning component.

  • After successfully download both files (DataTables-1.10.16.zip + jQuery js file) now, we can upload these as a static resources.
  • For upload zip file, from Setup >> Develop >> Static Resources >> New.
  • In the Name field, enter the name which is use in lightning component.
  • Click Choose File or Browse, and select dataTable zip file which we downloaded before.
  • In the Cache Control drop-down list, select Public.
  • Click on the Save button.

Follow same steps to upload both files.

data table jQuery upload sfdc
Data Table Zip file upload…
upload jQuery files
jQuery 2.2.4 JS file upload
Step 3 : Use jQuery Data Table on salesforce lightning component.

jQuery data table lighting demo

Step 4 : Create Apex Controller 

From developer console >> file >> new >> Apex Class 

jQueryDataTableCtrl.apxc
/*
Source : Sfdcmonkey.com
API Version: 42
Date : 3/13/2018
*/
public with sharing class jQueryDataTableCtrl {
@AuraEnabled
   public static list <Opportunity> fetchOpportunity() {
      Return [SELECT Name,Type,StageName,Amount,CloseDate FROM Opportunity LIMIT 500];
          
    }
}
Step 5 : Create Lightning Component

From developer console >> file >> new >> Lightning Component 

dataTableDemo.cmp
<!--
 Source : Sfdcmonkey.com
 API Version: 42
 Date : 3/13/2018
-->
<aura:component controller="jQueryDataTableCtrl">
    
    <!--use JQuery Data Table css,Js and jQUERY js file in lightning component by using ltng:require component-->
    <ltng:require styles="{! $Resource.	datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 , 
                           $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <aura:attribute name="lstOpp" type="opportunity[]"/>     
    
    <div class="slds-m-around_medium">
        <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Stage</th>
                    <th>Amount</th>
                    <th>Close Date</th> 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.lstOpp}" var="acc">
                    <tr>
                        <td>{!acc.Name}</td>
                        <td>{!acc.Type}</td>
                        <td>{!acc.StageName}</td>
                        <td>{!acc.Amount}</td>
                        <td>{!acc.CloseDate}</td>
                    </tr>
                </aura:iteration>  
            </tbody>
        </table>
    </div>
</aura:component>
  • By the ltng:require tag in lightning component we can load external CSS and JavaScript libraries after we upload them as static resources.
dataTableDemoController.js
({
    scriptsLoaded : function(component, event, helper) {
        console.log('Script loaded..'); 
    },
    
    doInit : function(component,event,helper){
        //call apex class method
        var action = component.get('c.fetchOpportunity');
        action.setCallback(this, function(response) {
            //store state of response
            var state = response.getState();
            if (state === "SUCCESS") {
                //set response value in lstOpp attribute on component.
                component.set('v.lstOpp', response.getReturnValue());
                
                // when response successfully return from server then apply jQuery dataTable after 500 milisecond
                setTimeout(function(){ 
                    $('#tableId').DataTable();
                    // add lightning class to search filter field with some bottom margin..  
                    $('div.dataTables_filter input').addClass('slds-input');
                    $('div.dataTables_filter input').css("marginBottom", "10px");
                }, 500);          
            }
        });
        $A.enqueueAction(action); 
    },
})
  • see code comments..

Check Also : Powerful Lightning Datatable base component – Example Using Fieldset

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]
<aura:application extends="force:slds">
    <c:dataTableDemo/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

jQuery-data-table-sfdc-lighting

it’s just a demo…you can find more cool features of dataTable here…

Some Useful Resources : 

Check Also : Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  or Developer Forums 🙂

35 comments

  • I think “lstOpp” attribute in the component should be of type “Opportunity[]” instead of “account[]”.

    Reply

  • Hi,

     

    I used the datatable component twice in my homepage. In one component I am able to see the search bar, pagination but in the other component it is not loading. If I remove one component , it appears in the other component. I think it gets loaded only once in a page.

    Can you please tell me workaround for it?

    Reply
  • Pingback: jquery datatable sfdc monkey | Question

  • Hi Piyush,

    I tried this in my Org but when I try to rerender the table with new data on picklist on-change event, it is showing weird results like,
    1) very slow in loading
    2) Still seeing old data in the table after picklist change, but I can see new data returning from the controller.

    Reply

  • I was trying to display data based on list views. its working fine all functionality(pagination and sorting) for default list view only . when i changed list view the functionality is not working i meant pagination and sorting.

    Reply

  • How can we reload the Datatable with new data ? i am trying to feed the Datatable with DOM source but when i destroy the Datatable and initialize it again it give me some problems: like ‘b.nTableWrapper is null’  ‘i is unidefined’ and the table data is messed up.

    <table id="tableId" class="slds-table slds-table--bordered slds-table--fixed-layout box slds-max-medium-table--stacked-horizontal">
<thead>
 <tr>
  <th>Action</th>
  <th>Name</th>
  <th>Size</th>
  <th>Last Modified</th>
 </tr>
</thead>
<tbody>
<aura:iteration items="{!v.lstFile}" var="fle">
 <tr>
  <td class="slds-truncate wrapping"></td>
  <td class="slds-truncate wrapping"><a Target="_blank" HRef="{!fle.DriveFileUrl__c}">{!fle.Name}</a></td>
  <td class="slds-truncate wrapping">{!fle.Size__c}</td>
  <td class="slds-truncate wrapping">{!fle.LastModified__c}</td>
 </tr>
</aura:iteration>
</tbody>

    Thanks for the help

     

    Reply

  • How can i reinitialize the table properly in salesforce Lightning Experience, because i am doing a destroy() method but it gives me errors such as: ‘b.nTableWrapper is null’ or ‘i is undefined’ . This is my table that i am updating depending on a click event:

    <table id="tableId" class="slds-table slds-table--bordered slds-table--fixed-layout box slds-max-medium-table--stacked-horizontal">
<thead>
 <tr>
  <th>Action</th>
  <th>Name</th>
  <th>Size</th>
  <th>Last Modified</th>
 </tr>
</thead>
<tbody>
 <aura:iteration items="{!v.lstFile}" var="fle">
  <tr>
    <c:googleDriveFolderV2Helper driveFolderEvent="{! c.handleFolderClick }" folder="{!fle}"/>
    <td class="slds-truncate wrapping"></td>
    <td class="slds-truncate wrapping"><a Target="_blank" HRef="{!fle.DriveFileUrl__c}">{!fle.Name}</a></td>
    <td class="slds-truncate wrapping">{!fle.Size__c}</td>
    <td class="slds-truncate wrapping">{!fle.LastModified__c}</td>
  </tr>
 </aura:iteration>
</tbody>

    Thanks for any help

     

     

    Reply

  • Hi, i am getting below error while loading the data table:

    [$(…).DataTable is not a function]

    Reply

  • use below code in scriptsloaded function

    var $ = jQuery.noConflict();

    and the below

    setTimeout(function(){
    jQuery(‘#tableId’).DataTable();
    // add lightning class to search filter field with some bottom margin..
    jQuery(‘div.dataTables_filter input’).addClass(‘slds-input’);
    jQuery(‘div.dataTables_filter input’).css(“marginBottom”, “10px”);
    }, 500);

    Reply

  • I used this on a lighting component and it works perfectly in classic, however when the user is fully on lighting experience the JQuery does not seem to load.  Does anyone have any idea how to fix it?

    Reply

  • It is working fine if we test it by creating a lightning app. But if we test the datatable in Lightning epxerience, sorting is not working like Andy Aldis said.

    Reply

  • i want to use check box for select a record and select all. and also i want to show all the records in a single page without any pagination since i have around 5000 records. if possible please help me with the sample code.

    Reply

  • Hello , I have used similar code but its giving me error “Cannot read property length of undefined” when records are loaded to table. please advise.

    Reply

  • if we customize this code for multiple picklist value, which brings different values in list for selected picklist value, but while we search for specific values then its find values from outside the list of selected picklist value.

    Reply

  • Past One Year Gone.

    More Than Salesforce StackExchange.Your Blog play a big role in every developer success.

    You are the real MVP.

    Reply

  • Hi,

    Can anyone help me?

    1.Date fields are not sorting in this table, I need sorting for date fields also.

    2. And i am using custom search in lightning component, when click on search button table data is not showing.

     

    Thank You,

    Mani

    Reply

    • @Mani

      For sorting on date fields I needed:

      You’ll need to assign your dateformat to the datatable (in my case it was D-M-YYYY):

      jQuery.fn.dataTable.moment( ‘D-M-YYYY’ );

      And then you’ll need to assign a render like thus to the date column

      render = function ( data, type, row, meta ) {if (data) {return moment(data).format(‘D-M-YYYY’);} else return null;};”)

      Reply
  • Pingback: Copy To Clipboard Functionality In Salesforce Lightning Component
  • Pingback: How To Create Expand/Collapse Sections In SFDC Lightning Component

  • How can we add this jquery plugin with lightning:datatable? I am unable to make it work. Thanks in advance.

    Reply

  • This works fine for me for component api version 39 and older. After change api version to 40 or newest than I got an exception:

    aura_prod.js:907 Uncaught TypeError: Cannot read property ‘length’ of undefined
    throws at https://devavanto2-accura.cs85.force.com/avanto/resource/1553006701000/datatable2/DataTables-1.10.16/media/js/jquery.dataTables.min.js:23:394 TypeError: Cannot read property ‘length’ of undefined
    at Ha (jquery.dataTables.min.js:23)
    at Proxy.eval (jquery.dataTables.min.js:16)
    at eval (jquery225:2)
    at Function.map (jquery225:2)
    at n.fn.init.map (jquery225:2)
    at ma (jquery.dataTables.min.js:16)
    at e (jquery.dataTables.min.js:92)
    at Proxy.eval (jquery.dataTables.min.js:92)
    at Function.each (jquery225:2)
    at n.fn.init.each (jquery225:2)

    Have any one the same problem?

    Reply

Leave a Reply