function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mustafa JhabuawalaMustafa Jhabuawala 

How to use jQuery plugin (datatable) in lightning component ?

Hi All,

Please look into this, I am not able to call the jQuery datatable function. Below are the details - - 
<aura:application >
        <c:DatatableComponent />

DatatableComponent.cmp -
<aura:component controller="DatatableController">
<!-- Static Resource details - jQuery js file --> (jQUerySource), jQuery Datatable file --> (jqueryDatatableJS) -->
	<ltng:require scripts="/resource/1466061468000/jQuerySource,/resource/1466061531000/jqueryDatatableJS" afterScriptsLoaded="{!c.jsLoaded}"/>
<!-- doInit method will call JS controller and then will get the details from Apex Controller and put in into the HTML using aura:iteration -->
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
              <table class="display" id="#sampleTable">
				  <aura:iteration items="{!v.cases}" var="case">
        <div class="col-md-2"></div>
DatatableComponentController.js - 
    jsLoaded: function(component, event, helper) {
   doInit: function(component, event, helper) {    
DatatableComponentHelper.js - 
    getCaseList: function(component) {
    var action = component.get("c.getCases");
    var self = this;
    action.setCallback(this, function(actionResult) {
        component.set("v.cases", actionResult.getReturnValue());            
DatatableController.apxc - 
public class DatatableController {
   public static List<Case> getCases() {
       system.debug([SELECT Id FROM Case limit 10]);
       return [SELECT Id FROM Case limit 10];
On click of preview button. I am getting this error -

User-added image

I am using jquery data table ( here.

Need urgent help.

Thank you in advance.
Jasveer SinghJasveer Singh
Include Jquery into lightning Component

Go to Setup select Critical Update

Deactivate:  Enable Lightning LockerService Security

and paste below code in developer console

1 Step: Insert into component

<ltng:require scripts="/resource/Jq"  afterScriptsLoaded="{!c.afterScriptsLoaded}" />
2 Step: Insert into Component

<button id="button1" onclick="{!c.dropdown}" class="slds-button slds-button--neutral">Show/Hide Columns
                <img src="/resource/dropdownIcon" style="height:20px; width:20px;"/></button>
<p id="dropdown1">hi</p>
Step 3: insert into Controller

    afterScriptsLoaded : function(component, event, helper) {
    dropdown:function(component, event, helper)
      //  console.log("1st time");
       //  $.noConflict();
//console.log("2nd time");

Andy NormanAndy Norman
I keep seeing you recommend that people disable the Lightning LockerService to fix their problems, you really should give people a bit more info when you do. Doing that is just a temporary workaround, because:
  • for some orgs you can't disable the Lightning LockerService (if it is a Summer 2016 org that didn't have any Lightning components before)
  • all orgs will have it enabled sometime around October 2016
If people have problems with their code running with the Lightning LockerService enabled, they need to work out how to fix the root cause soon. Something I'm finding to my cost at the moment, it breaks a lot of code.
Andy Grove 15Andy Grove 15
@Mustafa- Were you able to resolve the issue? Can you share the snippet?
yogaraj kvyogaraj kv
@Mustafa - were you able to resolve this issue? What is the fix. 
What is the compaitble JQuery, Bootstrap version for lightning when we enable locker service
Poornima VelmururganPoornima Velmururgan
@yogaraj kv - You can try using the Lightning Datatable Dev for building Lightning DataTable available free at Appexchange at you can leverage this component to build your Datatable by just giving the JSON structure to it thereby avoiding the incompatibility issues with jQuery etc., Please try the trail demo on the listing and check out our blog on how to use this Lightning Datatable. ( For more information, Please contact us directly at or

Hope this helps!

Mustafa JhabuawalaMustafa Jhabuawala
Yes we can do that. Kindly post this question seperately so that others can take benefit of that.

Share the link once you post the question.
Here is the link :) please do post it