• Andy Grove 15
  • NEWBIE
  • 5 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies
Hi All,

Please look into this, I am not able to call the jQuery datatable function. Below are the details - 

DatatableApp.app - 
<aura:application >
        <c:DatatableComponent />
</aura:application>

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">
			<thead>
				<tr>
					<th>ID</th>
				</tr>
			</thead>
			<tbody>
				  <aura:iteration items="{!v.cases}" var="case">
         <tr><td>1</td><td>{!case.Id}</td></tr>
       </aura:iteration>
			</tbody>
		</table>
        </div>
        <div class="col-md-2"></div>
    </div>
 </aura:component>
DatatableComponentController.js - 
 
({
    jsLoaded: function(component, event, helper) {
        debugger;
        $('#sampleTable').DataTable();
    },
   doInit: function(component, event, helper) {    
      helper.getCaseList(component);   
   }
})
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());            
    });
    $A.enqueueAction(action);
  }   
})
DatatableController.apxc - 
public class DatatableController {
   @AuraEnabled
   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 (https://datatables.net/) here.

Need urgent help.

Thank you in advance.
 
I need to sort data based on column heading in table in lightning is there any one who has worked on same requirement in lightning?