function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
k2018123k2018123 

lightning datatable jquery adding selection and buttons functionality

i have a jQuery lightning DataTable with the followwing code:
<aura:component controller="jQueryDataTableCtrl">

    <ltng:require styles="{! $Resource.	datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 ,
                           
                           $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <aura:attribute name="lstOpp" type="opportunity[]"/>     
    
    <div class="slds-m-around_medium">
        <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Stage</th>
                    <th>Amount</th>
                    <th>Close Date</th> 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.lstOpp}" var="acc">
                    <tr>
                        <td>{!acc.Name}</td>
                        <td>{!acc.Type}</td>
                        <td>{!acc.StageName}</td>
                        <td>{!acc.Amount}</td>
                        <td>{!acc.CloseDate}</td>
                    </tr>
                </aura:iteration>  
            </tbody>
        </table>
    </div>
</aura:component>
JS Controller
({
    ScriptsLoaded : function(component, event, helper) {

    },
    
    doInit : function(component,event,helper){

        var action = component.get('c.fetchOpportunity');
        action.setCallback(this, function(response) {
            //store state of response
            var state = response.getState();
            if (state === "SUCCESS") {
   
                component.set('v.lstOpp', response.getReturnValue());
                
                // when response successfully return from server then apply jQuery dataTable after 500 milisecond
                
                setTimeout(function(){ 
                   
                    $('#tableId').DataTable();

                    $('div.dataTables_filter input').addClass('slds-input');
                   $('div.dataTables_filter input').css("marginBottom", "10px");
                }, 500); 
                
            }
        });
        $A.enqueueAction(action); 
    },
})

I want to add additional functionality of editing the records according to this link https://editor.datatables.net/examples/simple/multiRow.html

Can anyone please help me in that as i am very bad in jQuery and Javascripts. Can you please share the sample code ?
 
bhanu_prakashbhanu_prakash
Hi,
check below urls
https://salesforce.stackexchange.com/questions/204963/spring-18-lightningdatatable-how-to-add-a-button-column
https://salesforce.stackexchange.com/questions/54106/how-to-use-jquery-or-any-js-lib-in-initial-post-rendering-of-lightning-compone

let us know if it helps you and mark it best if it helps you

Thanks, 
Bhanu Prakash
visit ForceLearn (https://www.forcelearn.com)for salesforce Latest Updates and development tips