Skip to main content 2025-2-1부터 2025-2-2까지 Trailblazer Community를 이용할 수 없습니다. 이 기간에 맞추어 활동을 계획하세요.
Ramon Diaz (Danone) 님이 #Lightning Experience에 질문했습니다
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개
  1. 2019년 4월 19일 오후 9:51
    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',

    }),

    );

    });

     
  2. 2020년 2월 3일 오전 6:01
    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?

     
  3. 2020년 1월 14일 오후 6:55
    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?
  4. 2019년 4월 5일 오후 4:28
    I also think you need to do this.template.querySelector('table.example').DATATABLE.DataTable();

    FYI this.template.query... doesn't need Jquery to run.
0/9000