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!
 

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!
 

I am getting an error when trying to do a sfdx retrieve:
ERROR:  Cannot read property 'fileName' of undefined.

Here is the command that is being issued in VS Code when I click on the package.xml file and retrive source from org:
sfdx force:source:retrieve --manifest c:\_hilton\BossReno\manifest\package.xml

The development environment is Salesforce Spring 2019
Here is my version of sfdx:
sfdx-cli/6.53.0-67a9cbb60c (windows-x64) node-v8.9.4


This package.xml file was generated by VS Code extension.  Here it is:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
<types>
<members>*</members>
<name>ApexClass</name>
</types>
<types>
<members>*</members>
<name>ApexComponent</name>
</types>
<types>
<members>*</members>
<name>ApexPage</name>
</types>
<types>
<members>*</members>
<name>ApexTestSuite</name>
</types>
<types>
<members>*</members>
<name>ApexTrigger</name>
</types>
<types>
<members>*</members>
<name>AuraDefinitionBundle</name>
</types>
<types>
<members>*</members>
<name>StaticResource</name>
</types>
<version>45.0</version>
</Package>