I am not able to display the DataTable using Jquery in LWC

Question

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?

Answer 1

You can't mix jQuery DOM operations with LWC. If you want to use jQuery data tables, you must use a root element marked as lwc:dom="manual", and then fully construct the contents of this table using JavaScript. It is possible to do this, but you'll probably find it much easier to simply use lightning-datatable instead. It provides much of the functionality of jQuery's DataTable in native LWC.

Answer 2

Do not use jQuery in a Lightning Web Component.

LWCs work in a Shadow DOM. JQuery doesn't work inside of Shadow DOM because typically it is trying to query for something starting at the document level and the shadow root blocks this.

If you are trying to access DOM objects, check out the documentation Here