I'm trying to use Sorting Datatable //cdn.datatables.net/1.10.12/css/jquery.dataTables.css and //cdn.datatables.net/1.10.12/js/jquery.dataTables.js in Salesforce Lightning Component. I've included required library files. It is working in normal table. Not working in when i used in aura:iteration to display a table. See below image. enter image description here

    <aura:component controller="sortViewLead" implements="forceCommunity:availableForAllPageTypes" access="global">
    <ltng:require styles="/resource/customsortingDT/customsortingDT/jquery.dataTables.css"
     afterScriptsLoaded="{!c.jsLoaded}" />
    <aura:attribute name="lstLeads" type="list"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <table id="extable" class="display" cellspacing="0" width="100%">
                <th>Start date</th>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Garrett Winters</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>

     <table id="exdumdp" class="display" cellspacing="0" width="100%">
               <aura:iteration var="d" items="{!v.lstLeads}" >

    doInit : function(component, event,helper) {
        console.log('Inside Doinit');
        var action = component.get("c.getLeads");
            //get the response state
            var state = a.getState();
            //check if result is successfull
            if(state == "SUCCESS"){
                var result = a.getReturnValue();
            else if(state == "ERROR"){
                alert('Error in calling server side action');
            //adds the server-side action to the queue        

    jsLoaded: function(component, event, helper) {

        console.log('Inside Jquery');
        var j$ = jQuery.noConflict();
        //Task Datatable


For Testing 

public without sharing class  sortViewLead{

    public List<Lead> getLeads1() {
        List<Lead> lstacc =  [SELECT id,Name,Company FROM Lead LIMIT 5];
        system.debug('!!!'+lstacc );
        return lstacc ;
    public static List<Lead> getLeads() {

        sortViewLead d = new sortViewLead();

        return d.getLeads1();

  • Could you please add relevant snippet of what you have done/tried? Jan 9, 2017 at 16:37
  • See Using External JavaScript Libraries. You can't import CDN files using Lightning, because the CSP (Content Security Policy) for Lightning doesn't allow external servers.
    – sfdcfox
    Jan 9, 2017 at 16:44
  • If you are just single sorting your table (one column at a time), then it's pretty easy to sort your Javascript array using a custom sort function, or even use the built in Array.sort() provided by javascript. Then you can avoid any third party libraries. Jan 9, 2017 at 17:27


Browse other questions tagged .