+ Start a Discussion
Nik shNik sh 

How to show the records in dataTable using Jquery

Hello,

As I am trying to import conatct records when i select any Account records,on that basis the contact records will be shown.I am trying to use of it but getting records.

Any code snippet...will be appreciate.
Ajay K DubediAjay K Dubedi
Hi Nik,

You can find the solution to your problem in the below link:
https://www.biswajeetsamal.com/blog/jquery-data-tables-in-visualforce-page/
https://salesforce.stackexchange.com/questions/33930/want-to-display-contacts-table-when-i-click-on-one-account
http://sfdcsrini.blogspot.com/2014/06/view-all-account-related-contacts-in.html
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Deepali KulshresthaDeepali Kulshrestha
Hi Nik,

1. To display contact records on the basis of account selected, you need to get all accounts in from of picklist or something alike. To do you may use jQuery in your lightning component. For using it download it and upload it in static resources (refer https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals/visualforce_static_resources.
2. Now to use it in your component use     <ltng:require scripts="{!$Resource.jQuery + '/jQuery/jquery-3.3.1.min.js'}" afterScriptsLoaded="{!c.doInit}"/>
3. Define doInit in controller-helper:
doInit: function(c, e, h){
        console.log('doInit Func Called...');
        h.doInit_helper(c, e, h);
    },
    
doInit_helper : function(c, e, h) {
        console.log('doInit Func in helper Called...');
        let action = c.get("c.methodNameOfYOurApexClass");
        console.log('action-->'+action);
        action.setCallback(this, function(response) {
            let state = response.getState();
            if (state === 'SUCCESS') {
                console.log('state is success...');
                let result = response.getReturnValue();
                console.log('result:->'+JSON.stringify(result));
                c.set('v.ListToBeSet',result);
            }
            else {
                console.log('in else part...');
                console.log(state);
            }


        });
        $A.enqueueAction(action);
    },
4. Now next define another controller-helper to bring the value of selected account annd send it to apex class.
 handleClick_helper : function(c, e, h){
        console.log('handleClick_helper called');
        let selecteAccount = c.get('v.valueOfSelectedAccount');
        console.log('Account Selected-->'+selecteAccount);
        console.log('Call to method made');
        let action = c.get('c.methodOfApexClassReceivingAccountNameAndReturningListOfCOntactsToMainComponent');
        action.setParams({'paramNameInApex': selecteAccount});
        $A.enqueueAction(action);
    },
    
5. Write Apex class: 
    With two method one to get all accounts and another to get conatcts specific to  certain accounts. You can do this I believe.
    
6. Finally write the component:
-Specify returnedContactListName and  selectedAccountValue in aura:attribute
- Write code of remaining component as it is.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
    


 
Nik shNik sh
Hello Deepali Kulshrestha,
Thank you for your reply, I am trying to perform the functionality.
But I want to show a dataTable on after selecting the Accout records which is am using selectOption,but the dataTable is showing at the time of initializing time. Here is my piece of my code:



<apex:page controller="AccountAndContactRecords" readOnly="true" sidebar="false">
   
    
    
    <apex:form >
        <style>
            .activeTab {
            background-color: #8A9744;background-image:none; padding-top:5px;height:15px;color:white;
            }
        </style>
        <apex:stylesheet value="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"/>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
        <apex:includeScript value="https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"/>
        
        <style type="text/css" media="screen">
            table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
            background-color: #F1F1F1;
            }
            
        </style>
        
          <script type="text/javascript" charset="utf8">
        var oTable;
        var currentNumberDisplayed = 5;
        
        $(document).ready(function() {
            $('#load').click( function () {
                var oSettings = oTable.fnSettings();
                console.log(oSettings);
                currentNumberDisplayed += 5;
                oSettings._iDisplayLength = currentNumberDisplayed;
                oTable.fnDraw();
                console.log('oTable');
            });

            
            oTable = $('[id$=testTable]').dataTable({
                "iDisplayLength": 5
            });
        });
        
        </script>            

 <apex:dataTable value="{!conList}" var="ac" id="testTable" onclick="clickElem(this);">
                <apex:column >
                    <apex:facet name="header"><apex:outputLabel value="Name" /></apex:facet>
                    <apex:outputText value="{!ac.name}"/>
                </apex:column>
                <apex:column >
                    <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
                    <apex:outputText value="{!ac.phone}"/>
                </apex:column>
                <apex:column >
                    <apex:facet name="header"><apex:outputLabel value="accountId" /></apex:facet>
                    <apex:outputText value="{!ac.accountId}"/>
                </apex:column>
                <apex:column >
                    <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
                    <apex:outputText value="{!ac.phone}"/>
                </apex:column>
                  </apex:dataTable>