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 -



I am using jquery data table (https://datatables.net/) here.

Need urgent help.

Thank you in advance.
 

We are attempting to build a lightning component for our salesforce community.  We are using the Napili template.  We want to use jQuery datatables in the lightning component (to allow for sorting, paging, and searching).  The lightning component is placed on a page referenced by a tab on the standard template nav bar.  When we first load the page, everything looks good, the datatable operates correctly.  When we click on another nav link (or even the same nav link again), the datatable loses its data (it isn't apparent at first, but when you click on a column to sort the table, the data disappears - a "No data" message is in the table).  Our datatable call is done in afterRender.  If we refresh the browser, everything works fine again.  Just navigating away from the tab and then back within the community do we see this problem.  

The data is populated in our apex controller via a doInit function in the component controller.  We know the data is getting populated properly because if we don't make the datatable call, we see the data in a normal table.

Has anybody seen this or have any suggestions?
 

Hello!

I created my own Lightning app and Ligthnng Component. Also I use Lightning Desigh System.
I placed table in the component. And it has a lot of records. I would like to display records by pages and I would like to navigate between pages. How can I do pagination for my table? May be using Lightning Design System.

Thank you in advice!