We're using jQuery datatables without our components but are getting

TypeError: $(…).DataTable is not a function

errors a lot of times when we load the page (not every time though). In our component we are loading the scrips like so:

<aura:component access="global" .../>
<aura:handler name=... ... />
<aura:handler name=... ... />
<aura:handler name="init" value="{!this}" action="{!c.tableInit}"/>

<ltng:require styles="/resource/jQueryDatatable/DataTables-1.10.12/media/css/jquery.dataTables.min.css, 
                       $Resource.jQueryDatatable + '/DataTables-1.10.12/media/js/jquery.js',
                       $Resource.jQueryDatatable + '/DataTables-1.10.12/media/js/jquery.dataTables.min.js',
                        $Resource.jQueryDatatable + '/DataTables-1.10.12/extensions/Responsive/js/dataTables.responsive.min.js',
                        $Resource.jQueryDatatable + '/DataTables-1.10.12/media/js/dataTables.checkboxes.min.js'
                       )}"  afterScriptsLoaded="{!c.routeTableLoad}"/>

It seems like we're loading them in the correct order but I could be wrong. First the jquery.js and then the datatables themselves. It is strange that sometimes it works fine and other times it will throw that error. Do we need to be destroying the table each time we leave the page or something? Has anyone else faced this issue in Salesforce?


  • This is the right order. Try loading the libraries one by one without the "join". – Itai Shmida Sep 18 '16 at 5:29
  • Hi @Angelo Any updates on this? – SE_User Nov 1 '16 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.