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

#Salesforce #Apex #LWC #SFDC #Lightning #Flow

Friday, September 6, 2019