JQuery Datatable in LWC responsive not working

Question

I am using JQuery Datatable in LWC (https://datatables.net/extensions/responsive/examples/) which i can use both in desktop and mobile version . I am trying to achieve the below responsiveness where all columns gets collapsed when width of the device gets smaller like below

But in my case, it stays like this . I have included all the scrips needed. Anything i am missing.

Below is my code

HTML

<template>
    <lightning-card>
        <div class="table-responsive">
            <table lwc:dom="manual" class="tableClass slds-table slds-table_cell-buffer slds-table_bordered"
                style="width:100%">
            </table>
        </div>
    </lightning-card>
</template>

JS -

import { LightningElement, track } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import dataTable from '@salesforce/resourceUrl/datatable';
import datatable1 from '@salesforce/resourceUrl/datatable1';
import JqueryResource from '@salesforce/resourceUrl/JqueryResource';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getAccounts from '@salesforce/apex/LWCExampleController.getAccounts';

export default class Callblockv2 extends LightningElement {
    accounts = [];
    error;
    async connectedCallback() {
        await this.fetchAccoutns();
        Promise.all([
            loadScript(this, JqueryResource),
            loadScript(this, datatable1 + '/DataTables-1.10.25/js/jquery.dataTables.min.js'),
            loadScript(this, datatable1 + '/Responsive-2.2.9/js/responsive.dataTables.min.js'),

            loadStyle(this, datatable1 + '/DataTables-1.10.25/css/jquery.dataTables.min.css'),
            loadStyle(this, datatable1 + '/Responsive-2.2.9/css/responsive.dataTables.min.css')
        ])
            .then(() => {
                console.log('script loaded sucessfully');
                // get the table tag reference from html template using class   
                const table = this.template.querySelector('.tableClass');
                const columnNames = ['Name', 'Industry', 'Type', 'Phone', 'Rating'];
                let tableHeaders = '<thead> <tr>';
                columnNames.forEach(header => {
                    tableHeaders += '<th>' + header + '</th>';
                });
                tableHeaders += '</tr></thead>';
                table.innerHTML = tableHeaders;

                let jqTable = $(table).DataTable({
                    responsive: true
                });
                $('div.dataTables_filter input').addClass('slds-input');
                $('div.dataTables_filter input').css("marginBottom", "10px");
                this.accounts.forEach(rec => {
                    let tableRows = [];
                    tableRows.push('<a href="/lightning/r/Account/' + rec.Id + '/view">' + rec.Name + '</a>');
                    tableRows.push(rec.Industry != undefined ? rec.Industry : '');
                    tableRows.push(rec.Type != undefined ? rec.Type : '');
                    tableRows.push(rec.Phone != undefined ? rec.Phone : '');
                    tableRows.push(rec.Rating != undefined ? rec.Rating : '');
                    jqTable.row.add(tableRows);
                });
                jqTable.draw();
            }).catch(error => {
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error!!',
                        message: JSON.stringify(error),
                        variant: 'error',
                    }),
                );
            });
    }

    async fetchAccoutns() {
        await getAccounts()
            .then(data => {
                if (data) {
                    this.accounts = data;
                }
            })
            .catch(error => {
                this.error = error;
                this.accounts = undefined;
                this.error = 'Unknown error';
                if (Array.isArray(error.body)) {
                    this.error = error.body.map(e => e.message).join(', ');
                } else if (typeof error.body.message === 'string') {
                    this.error = error.body.message;
                }
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error!!',
                        message: error,
                        variant: 'error',
                    }),
                );
            });
    }
}

Answer 1

Can you try to load in two parts and that too in renderedCallback as shown below

renderedCallback(){
    console.log('renderedCallback start');
    if (this.dataTableScriptInitialized) {
        return;
    }
    this.dataTableScriptInitialized = true;
    
    loadScript(this, JqueryResource)
    .then(() => {
        console.log('then');
        loadScript(this, datatable1 + '/DataTables-1.10.25/js/jquery.dataTables.min.js')
            .then(() => {
                console.log('inner then');
                loadScript(this, datatable1 + '/Responsive-2.2.9/js/responsive.dataTables.min.js')
                .then(() => {
                    loadScript(this, datatable1 + '/Responsive-2.2.9/js/responsive.dataTables.min.js'),
                })
            })
        })
    .catch(error => {
        console.log('error');
        throw(error);
    });
}

this will resolve any dependency related conflicts.