function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ramon Diaz 5Ramon Diaz 5 

jQuery Datatable Lightning web component issue "this.template.querySelector(...).DataTable is not a function"

Hello!
I'm trying to import a third-party js library in order to display a datatable.
https://datatables.net/examples/data_sources/js_array.html

I managed to import jQuery and DataTable js using import and static resources but when I try to translate the documentation sentence :
$('#example').DataTable()

into what a LWC accepts it doesn't work:
this.template.querySelector('table.example').DataTable();
Please find hereby my code:
filteredTable.html
<template>
    <lightning-card title="OST Events">
        <lightning-layout>
            <lightning-layout-item>
                    <table id="table_id" class="example">
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Row 1 Data 1</td>
                                <td>Row 1 Data 2</td>
                            </tr>
                            <tr>
                                <td>Row 2 Data 1</td>
                                <td>Row 2 Data 2</td>
                            </tr>
                        </tbody>
                    </table>
                <template if:true={error}>
                    <c-error-panel errors={error}></c-error-panel>
                </template>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

filteredTable.js
import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import DATATABLE from '@salesforce/resourceUrl/dataTablesv10_18';
import JQUERY from '@salesforce/resourceUrl/jQuery';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class FilteredTable extends LightningElement {
    DataTable;
    @track error;
    @track dataExample;

    dataTablejsInitialized = false;

    renderedCallback() {
        if (this.dataTablejsInitialized) {
            return;
        }
        this.dataTablejsInitialized = true;
        loadScript(this,JQUERY)
        .then(()=>{
            loadScript(this, DATATABLE+'/datatables.min.js')
        })
        .then(()=>{
            console.log("ENTRO EN EL .THEN DEL LOADSCRIPT");
            this.DataTable = this.template.querySelector('table.example').DataTable();
            })
            .catch(error => {
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading DataTables',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }

}

Is there an other way to call a function of an imported js library?

Thanks!
 
Nicola GrisctiNicola Griscti
I've done it before, here is an example https://github.com/punxcat/notecontent-lwc/blob/master/force-app/main/default/lwc/notescomp/notescomp.js

But I am also currently struggling on using jQuery commands within the LWC.. if you figured this out or there is a better tutorial on external scripts let me know!
Nicola GrisctiNicola Griscti
I also think you need to do this.template.querySelector('table.example').DATATABLE.DataTable();

FYI this.template.query... doesn't need Jquery to run.
VijayasaharanVijayasaharan
Hi Nicola 
Can you help me in my LWC problem of using a third party JS library (XSX js ) . I cant seem to figure out how do I instanciate or call a method in that library.
import 	shimlatest from '@salesforce/resourceUrl/shimlatest';
import 	xlsxfull from '@salesforce/resourceUrl/xlsxfull';

loadScript(this, shimlatest)
            .then(() => {
                loadScript(this, xlsxfull)
                    .then(() =>  {
                        X = XLSX; // THIS object XLSX IS FROM THE 3rd party library
                        console.log('XLSX Value of ' + X);
                        if(X !== undefined)
                        X = '';
                        this.initializePage(); 
                    })
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading XLSX modules',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });



 
Brandon Franklin 16Brandon Franklin 16
Hi Vijayasaharan,

I am running into the exact same issue with trying to use xlsx to read a spreadsheet when uploaded from a file input field. Did you figure out how to access the methods from the xlsx library?
Megha SachaniaMegha Sachania
Hi Is there any way to use Jquery '$' in lightning web component?
 
Megha SachaniaMegha Sachania
Also I am facing issue using same component in lightning web component.Example: I have a dropdown component i need to use this same component in other page but issue is i am facing is that the data is loaded dynamically and if i use that component then data in dropdown will conflict.Is there any solution regarding this?
 
Niraj Kumar 107Niraj Kumar 107
HI All,

I am new in LWC implementation and facing problem while adding 3rd Party js lib within LWC component.

Can We are Jquery or React lib in LWC or not?