Skip to main content The Trailblazer Community will be unavailable from 2/1/2025 to 2/2/2025. Please plan your activities accordingly.
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!

 
7 answers
Loading
0/9000