You need to sign in to do that
Don't have an account?
Ramon 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 :
into what a LWC accepts it doesn't work:
filteredTable.html
filteredTable.js
Is there an other way to call a function of an imported js library?
Thanks!
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!
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!
FYI this.template.query... doesn't need Jquery to run.
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.
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?
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?