How To Use jQuery DataTable Plugin In Salesforce Lightning Component

How To Use jQuery DataTable Plugin In Salesforce Lightning 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.

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

• Go to below link for download data table plugin. [version 1.10.16 Recommended]
• https://datatables.net/releases/DataTables-1.10.16.zip
• This zip file has includes CSS, JavaScript and other files for DataTable 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

• 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 Zip file upload…

 

jQuery 2.2.4 JS file upload

Step 3 : Use jQuery Data Table on salesforce lightning component.

Step 4 : Create Apex Controller 

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

jQueryDataTableCtrl.apxc

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* Source : Sfdcmonkey.com API Version: 42 Date : 3/13/2018 */ public with sharing class jQueryDataTableCtrl { @AuraEnabled    public static list 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

                

                    

Name

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47	controller="jQueryDataTableCtrl">               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}"/>          name="init" value="{!this}" action="{!c.doInit}"/>            name="lstOpp" type="opportunity[]"/>               class="slds-m-around_medium">         id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">

                    Type

                    Stage

                    Amount

                    Close Date

                

            

            

                items="{!v.lstOpp}" var="acc">

                    

                        {!acc.Name}

                        {!acc.Type}

                        {!acc.StageName}

                        {!acc.Amount}

                        {!acc.CloseDate}

                    

                

  

            

        

    

 

 

• 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

({     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);     }, })

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

demo.app [Lightning Application]

1 2 3 4 5 6 7 8

extends="force:slds">