0

I'm trying to write a Lightning Web Component which uses jquery and datatable static resources and getting an annoying error message without any idea how to solve it.

My html code is:

<div class="slds-box">
        <h1 style="vertical-align: super;font-size: 18px;">TEXT</h1>  
        <br></br>
        <table id="tableId" class="example">
            <thead>
                <tr class="slds-text-heading_label">
                    <th class="thIndex" scope="col"><div class="slds-truncate" title="TEXT">TEXT</div></th>
                    <th scope="col"><div class="slds-truncate" title="TEXT">TEXT</div></th>
                    <th scope="col"><div class="slds-truncate" title="TEXT">TEXT</div></th>
                </tr>
            </thead>
            <tbody>
                <template for:each={list} for:item='emp' for:index='indx'>
                    <tr key={emp.Id}>
                        <th scope="row"><div class="slds-truncate">{indx}</div></th>
                        <th scope="row"><div class="slds-truncate">TEXT</div></th>
                        <th scope="row"><div class="slds-truncate">TEXT</div></th>
                    </tr> 
                </template>
            </tbody>
        </table> 
    </div>

My JavaScript (part of) code is:

import { loadScript,loadStyle } from 'lightning/platformResourceLoader';
import { LightningElement,track,api,wire } from 'lwc';
import datatableAS from '@salesforce/resourceUrl/compsuite__datatable';
import jQuery from '@salesforce/resourceUrl/compsuite__jquery224';

export default class Lwc_Curriculum_Training_Report extends NavigationMixin(LightningElement) {
    dataTablejsInitialized = false;
    renderedCallback() {
       if (this.dataTablejsInitialized) {
           return;
    }
    this.dataTablejsInitialized = true;
    loadScript(this,jQuery)
    .then(()=>{
        Promise.all([
           loadScript(this, ChartJS)
           loadScript(this, datatableAS+'/DataTables- 
                            1.10.18/js/jquery.dataTables.min.js'),
           loadStyle(this, datatableAS+'/DataTables- 
                           1.10.18/css/jquery.dataTables.min.css')
        ])
        .then(()=>{
           this.template.querySelector('.example').DataTable();
         })
    })
    .catch(error => {
    this.error = error;
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Error loading DataTables',
            message: error.message,
            variant: 'error'
        })
    );
  });  
}

When the component is rendered, an error message is displayed in the console:

null TypeError: this.template.querySelector(...).DataTable is not a function
    at eval (lwc_Curriculum_Training_Report.js:4)
    (anonymous) @ aura_prod.map.js:46726
    t.$$lwcEventWrapper$$ @ lwc_engine.js:3211
    lwc_Curriculum_Training_Report.js:4 Uncaught (in promise) TypeError: 
this.template.querySelector(...).DataTable is not a function
    at eval (lwc_Curriculum_Training_Report.js:4) 

It's important to mention that I tried .DataTable,.dataTable,.datatable and .Datatable, nothing worked. In addition the Static Resources loaded properly which means the problem is not about the path of the resources, it's about how to initialize the DataTable, which method/command/code should be written.

I hope someone could help me.

EDIT: I tried to load the jQuery in promise as well. Additionally, these static resources work in lightning components I've written before, the problem invokes just for lightning web component.

3

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

Potential Cause:

  • jQuery DataTables library is missing (doenst seem to be the case)
  • jQuery library is loaded after jQuery DataTables
  • Multiple versions of jQuery library is loaded

Have you ensured that none of the above applies?

Additionally, you have t o take into consideration that the version you are using is supported by locker service or supported at all.

LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components

this post contains some libraries with versions that work with locker service, however, i am not sure it is up to date: Which external Javascript libraries work with Lightning Locker Service?

  • Thanks for answering. I've seen this potential cause but none of them related to my error. In addition, these static resources work well in my lightning components so it's not about salesforce as well. – Derminal Apr 25 at 16:06
  • what version of the library are you using? – glls Apr 25 at 16:35
  • jQuery 224 and DataTable 1.10.18 – Derminal Apr 25 at 17:47
  • Does it make sense that DataTable 1.10.18 works for me in Lightning Component but is not supported in Lightning Web Component? Because of this I didn't take the version of it in account. What do you think? Should I try to use 1.10.12? – Derminal Apr 25 at 18:31
  • in your promise I dont see you actually loading Jquery, might want to try to add it – glls Apr 25 at 18:37

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.