Below is my JavaScript Code::
import { LightningElement, track, api, wire } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader'
import getAllOpps from '@salesforce/apex/jQueryDataTableController.fetchOpportunity';
import datatable from '@salesforce/resourceUrl/datatable';
import jQuery from '@salesforce/resourceUrl/jquery224';
export default class Datatable extends LightningElement {
@track data;
@track error;
@wire(getAllOpps)
wiredOpps({error,data}) {
//console.log('I am here1::' + data);
if(data){
this.data = data;
/*if (window.jQuery)
{
alert('jQuery is loaded');
}
else
{
alert('jQuery is not loaded');
}*/
/*setTimeout(function(){
//window.jQuery(this.template.querySelector('.slds-table')).attr("style", "background-color:green");
//window.jQuery(this.template.querySelector('.slds-table')).DataTable();
//console.log('Within Timeout!!');
//this.template.querySelector('#tableId').datatable.DataTable();
//const table = this.template.querySelector('#tableId');
//$(table).DataTable();
//$('#tableId').DataTable();
//this.template.querySelector('#tableId').DataTable();
// add lightning class to search filter field with some bottom margin..
//$('div.dataTables_filter input').addClass('slds-input');
//$('div.dataTables_filter input').css("marginBottom", "10px");
}, 500); */
//console.log(data);
//console.log('I am here!!' +JSON.stringify(this.data));
//console.log(JSON.stringify(data, null, '\t'));
} else if (error) {
this.error = error;
console.log('error::' + JSON.stringify(this.error));
}
}
renderedCallback() {
console.log('renderedCallback ... Start');
if (window.jQuery)
{
//let value = window.jQuery(this.template.querySelector('.testid')).attr('id');
//let value = window.jQuery(this.template.querySelector('.testid')).attr("style", "background-color:green");
window.jQuery(this.template.querySelector('.slds-table')).DataTable({
data:this.data
}
);
//window.jQuery(this.template.querySelector('.slds-table')).attr("style", "background-color:green");//.DataTable(); // <div>First</div>
//window.jQuery(this.template.querySelector('.slds-table_bordered')).DataTable(); // <div>First</div>
//console.log('value : '+value);
//alert('jQuery is loaded');
//alert("Value: " + $("#testid").val());
//$("#testid").val("Dolly Duck");
//$(".testid").attr("style", "background-color:green");
}
else
{
alert('jQuery is not loaded');
}
//$(".testid").attr("style", "background-color:green");
console.log('renderedCallback ... End');
}
connectedCallback() {
console.log('connected callback!!');
loadScript(this, jQuery);
//loadStyle(this,datatable+'/DataTables-1.10.16/media/css/jquery.dataTables.min.css');
//loadScript(this,datatable+'/DataTables-1.10.16/media/js/jquery.dataTables.min.js');
Promise.all([
loadScript(this, jQuery),
loadStyle(this,datatable+'/DataTables-1.10.16/media/css/jquery.dataTables.min.css'),
loadScript(this,datatable+'/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
])
.then(() => {
if (window.jQuery)
{
alert('jQuery is loaded connected callback!!');
//let value = window.jQuery(this.template.querySelector('#tableId')).attr("style", "background-color:green");
//window.jQuery(this.template.querySelector('#tableId')).DataTable();
}
else
{
alert('jQuery is not loaded connected callback!!');
}
alert('Files loaded.');
})
.catch(error => {
console.log('Error::' + JSON.stringify(error));
alert(error.body.message);
});
if (window.jQuery)
{
alert('jQuery is loaded connected callback!!');
}
else
{
alert('jQuery is not loaded connected callback!!');
}
console.log('Connected CallBack1');
}
}
My HTML Code is as follows:
<template>
<div class="slds-m-around_medium">
<table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" style="width:100%" >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Type</th>
<th>Stage</th>
<th>Amount</th>
<th>Close Date</th>
</tr>
</thead>
<tbody>
<template for:each={data} for:item='acc'>
<tr key={acc.id}>
<td>{acc.Id}</td>
<td>{acc.Name}</td>
<td>{acc.Type}</td>
<td>{acc.StageName}</td>
<td>{acc.Amount}</td>
<td>{acc.CloseDate}</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
I am getting the following error::
Uncaught (in promise) TypeError: Cannot read property 'style' of undefined
at Ea (jquery.dataTables.min.js:62)
at ga (jquery.dataTables.min.js:48)
at e (jquery.dataTables.min.js:92)
at Proxy.eval (jquery.dataTables.min.js:92)
at Function.each (jquery224:2)
at n.fn.init.each (jquery224:2)
at n.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
at n.fn.init.h.fn.DataTable (jquery.dataTables.min.js:164)
at s.renderedCallback (amnTable.js:4)
at callHook (aura_prod.js:29)
How do I resolve it?