0

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 enter image description here

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

enter image description here

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',
                    }),
                );
            });
    }
}
1

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.