How to use jQuery DataTable Plugin In Salesforce Lightning Component?

How To Use jQuery DataTable Plugin In Salesforce Lightning Component?

DataTables:

"DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table."

Don’t forget to check out: Salesforce Visualforce Vs Salesforce Lightning Component

Here is some enhancement provide by DataTable Plugin to an HTML table:

datatables

Follow the steps to use jQuery Datatable In your Salesforce Lightning Component :

  1. Download jQuery library from the link below.
    To Download jQuery library go to the link and right-click on the page and click save.
    DataTable
  2. Download jQuery Datatable Plug-in from the link below.
  3. Add 'jQuery' library and 'jQuery Datatable Plug-in' as a static resource in your Salesforce Org.
    Steps to add the file as a static resource
  4. Create a Lightning component.
    • A snippet of code for your Lightning component-
<aura:component controller="JqueryDataTableDemo">
    
    <!--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.Datatable.min.css" scripts='/resource/jquery,/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="listOfAccounts" type="Account[]"/>     
    
    <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>AccountNumber</th>
                    <th>Phone</th>
                    <th>Billing Address Country</th>
                    <th>Description</th> 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.listOfAccounts}" var="acc">
                    <tr>
                        <td>{!acc.Name}</td>
                        <td>{!acc.AccountNumber}</td>
                        <td>{!acc.Phone}</td>
                        <td>{!acc.BillingAddress.country}</td>
                        <td>{!acc.Description}</td>
                    </tr>
                </aura:iteration>  
            </tbody>
        </table>
    </div>
</aura:component>
    • A snippet of code for your JavaScript Controller -
({
    scriptsLoaded : function(component, event, helper) {
        console.log('Script loaded..'); 
    },
    
    doInit : function(component,event,helper){
        //call apex class method
        var action = component.get('c.getAccountList');
        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.listOfAccounts', 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); 
    },
})
    • A snippet of code for your Apex Controller -
public class JqueryDataTableDemo {
@AuraEnabled
   public static list <Account> getAccountList() {
      Return [SELECT Name,AccountNumber,Phone,BillingAddress,Description FROM Account LIMIT 500];         
    }
}
    • A snippet of code for your Lightning Application -
<aura:application extends="force:slds">
    <c:JqueryDataTableDemoComponent />
</aura:application>

Here is a video that shows how data table work on lightning component UI:-

------------------

Reference:
https://datatables.net/

Responses

Comments are closed.

Popular Salesforce Blogs