<aura:application >
        <c:DatatableComponent />
</aura:application>

<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>

({
    jsLoaded: function(component, event, helper) {
        debugger;
        $('#sampleTable').DataTable();
    },
   doInit: function(component, event, helper) {    
      helper.getCaseList(component);   
   }
})

({
    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);
  }   
})

public class DatatableController {
   @AuraEnabled
   public static List<Case> getCases() {
       system.debug([SELECT Id FROM Case limit 10]);
       return [SELECT Id FROM Case limit 10];
   }   
}