Hello,

I am  using a datatable component in a sfdc lighting component, when I veiw the component in Salesforce Classic it loads and looks fine, however in lighting experience the jquery components do not load.  A copy of my cod eis below

Component
<aura:component controller="ActivityFirmComponentControllerSCRewrite" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
  <ltng:require styles="{! $Resource.    datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}"
                    scripts="{!join(',',
                             $Resource.jquery224 ,
                             $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                             }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="modalData" type="String" access="GLOBAL" description="The page data"/>
    <aura:attribute name="parentId" type="String" description="The Firm Id to be passed to the query." />
    <aura:attribute name="urlEvent" type="String"/>
    <aura:attribute name="urlTask" type="String"/>
    <aura:attribute name="urlCall" type="String"/>
    <aura:attribute name="urlEdit" type="String"/>
    <aura:attribute name="Spinner" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="AllActivities" type="List"/>
    <aura:handler event="aura:waiting" action="{!c.waiting}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
    <c:OFI_Modal class="slds-fade-in-open slds-modal--large" header="All Activities">
        <aura:if isTrue="{!v.Spinner}">
            <div aura:id="spinnerId" class="slds-spinner_container">
                <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                    <span class="slds-assistive-text">Loading</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
        </aura:if>
        <center>
        <lightning:buttonGroup >
            <lightning:button  class='topBtn' label="New Event" onclick="{!c.goToUrl}"></lightning:button>
            <lightning:button  class='topBtn' label="New Task" onclick="{!c.goToUrl}"></lightning:button>
            <lightning:button  class='topBtn' label="Log a Call" onclick="{!c.goToUrl}"></lightning:button>
        </lightning:buttonGroup>
      </center>
        <div class="slds-m-around_large"  style="overflow: auto; overflow-y: hidden;">
          <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%" >
              <thead>
                  <tr >
                      <th style="color:#005fb2" >Due Date</th>
                      <th style="color:#005fb2">Primary Contact</th>
                      <th style="color:#005fb2">Activity Type</th>
                      <th style="color:#005fb2">Subtype</th>
                      <th style="color:#005fb2">Subject</th>
                      <th style="color:#005fb2" class=".slds-has-flexi-truncate">Description</th>
                      <th style="color:#005fb2">Assigned To</th>
                      <th style="width:5%;color:#005fb2">View</th>
                  </tr>
              </thead>
              <tbody>
                <aura:iteration  items="{!v.AllActivities}" var="a">
                  <tr style="background-color:white; " class="dataRow">
                      <td>{!a.actDueDate}</td>
                      <td>{!a.actPrimaryContact}</td>
                      <td>{!a.actType}</td>
                      <td>{!a.actSubType}</td>
                      <td>{!a.actSubject}</td>
                      <td>{!a.actFullDesc}</td>
                      <td>{!a.actAssigned}</td>
                      <td class='view'><lightning:button class='rowBtn' variant="base" label="View" title="{!a.actId}" onclick="{! c.goToRecord }"/></td>

                  </tr>
                </aura:iteration >
              </tbody>
            </table>
        </div>
        <aura:set attribute="footer">
            <lightning:button label="Close" onclick="{!c.closeModal}"></lightning:button>
        </aura:set>
    </c:OFI_Modal>
    <div aura:id="backdrop" class="slds-backdrop slds-backdrop--open"></div>
</aura:component>

Component.js

({
  scriptsLoaded: function(component, event, helper) {
    console.log('Script loaded..');
  },

  init: function(component, event, helper) {
    var modalData = component.get("v.modalData");
    var parentId = component.get("v.modalData.parentId");
    //call apex class method

    var action = component.get('c.getAllActivities');
    action.setParams({
      "parentId": component.get("v.modalData.parentId"),
      "modalData": component.get("v.modalData")
    });
    action.setCallback(this, function(response) {
      //store state of response
      var state = response.getState();
        console.log('state is '+state);
      if (state === "SUCCESS") {
          console.log('state is success');
        //set response value in lstOpp attribute on component.
        component.set('v.AllActivities', response.getReturnValue());
        
        // when response successfully return from server then apply jQuery dataTable after 500 milisecond
        setTimeout(function() {
            console.log('timeout function set');
          var table = $('#tableId').DataTable();
                        console.log('table is '+table);
          // add lightning class to search filter field with some bottom margin..
          $('div.dataTables_filter input').addClass('slds-input');
            console.log('add class');
          $('div.dataTables_filter input').css("marginBottom", "10px");
                        console.log('add css');

        var order = table.order();
            table
            .order( [ 0, 'desc' ] )
            .draw();
             console.log('order');
            
        }, 500);
                console.log('500ml');
          
      }
    });
    component.set("v.parentId", parentId);
    console.log('check point 2');

    var urlEvent = "/setup/ui/recordtypeselect.jsp?ent=Event&retURL=%2Fa07J000000F0rlH&save_new_url=%2F00U%2Fe%3Fwhat_id=" + parentId + "&retURL" + parentId;
    var urlTask = "/setup/ui/recordtypeselect.jsp?ent=Task&status=Completed&retURL=/a07J000000F0rlH&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26what_id=" + parentId + "&followup=0%26tsk5%3DCall%26retURL" + parentId;
    var urlCall = "/setup/ui/recordtypeselect.jsp?ent=Task&tsk12=Completed&Task&tsk5=Call&Task&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26retURL%3D%252F%2Fapex%2FredirectToNewTask?rId=" + parentId + "&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&what_id=" + parentId;
    component.set("v.urlEvent", urlEvent);
    component.set("v.urlTask", urlTask);
    component.set("v.urlCall", urlCall);
    console.log('check point 3');
    $A.enqueueAction(action);
  },