function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nik shNik sh 

jQuery table issue

Hello 
As I am trying to show records in jquery.
Onloading page it appears,but select some records which should be assoicated with it,then it disappear.

Any help
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Please refer to the below links which might help you further with the above requirement.

https://salesforce.stackexchange.com/questions/33515/jquery-datatable-disappears-once-rerender-the-pageblocktable-using-actionfunctio

http://sfdcsrini.blogspot.com/2016/04/jquery-data-tables-in-visualforce-pages.html

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
DevADSDevADS
Hi Nik Sh,

Please post your code here.
Nik shNik sh
Hi DevADS
Please see the 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:pageBlock id="pb" title="Account and Related List" >
            
            <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">
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var accTable = j$('[id$="accTable"]').DataTable({
                });
                 j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var accTable = j$('[id$="accTable1"]').DataTable({
                }); 
                
            });
            
            </script>
            
            <apex:pageBlockSection >
                <apex:selectList value="{!accId}" size="1">
                    <apex:selectOptions value="{!AccountNames}" />
                    <apex:actionSupport event="onchange" action="{!accRecords}" oncomplete="accTable1"  reRender="opAcc,op111,op112,testTable" />
                    
                </apex:selectList>
            </apex:pageBlockSection>
            <!-- ====== Account Details====-->
            <apex:outputPanel id="opAcc">
                <apex:pageBlockTable value="{!accList}" var="a" title="Account Information" id="pbt1" columnsWidth="55%,15%,15%,15%" >
                    <apex:outputText value="Account Details" style="font-weight:800"></apex:outputText>
                    <apex:column headerValue="Name">
                        <apex:outputLink value="#" onclick="window.open('/{!a.id}','_blank')">{!a.Name}</apex:outputLink>
                    </apex:column>
                    <apex:column value="{!a.phone}"  />
                    <apex:column value="{!a.rating}"  />
                    <apex:column value="{!a.type}" />
                </apex:pageBlockTable>
            </apex:outputPanel>
            
            <apex:outputPanel id="op111">
                <apex:dataTable value="{!conList}" var="cons" id="accTable" >
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="Name" /></apex:facet>
                        <apex:outputText value="{!cons.name}"/>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
                        <apex:outputText value="{!cons.phone}"/>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="accountId" /></apex:facet>
                        <apex:outputText value="{!cons.accountId}"/>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
                        <apex:outputText value="{!cons.phone}"/>
                    </apex:column>
                    
                </apex:dataTable> 
            </apex:outputPanel>
            
            
        </apex:pageBlock>
    </apex:form>
</apex:page>

And one thing I am also trying using of oncomplete in action support but thats also not working fine,but the data is showing but not in JqueryTable.

<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:pageBlock id="pb" title="Account and Related List" >
            
            <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">
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var accTable = j$('[id$="accTable"]').DataTable({
                });
                 j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var accTable = j$('[id$="accTable1"]').DataTable({
                }); 
                
            });
            
            </script>
            
            <apex:pageBlockSection >
                <apex:selectList value="{!accId}" size="1">
                    <apex:selectOptions value="{!AccountNames}" />
                    <apex:actionSupport event="onchange" action="{!accRecords}" oncomplete="accTable1"  reRender="opAcc,op111,op112,testTable" />
                    
                </apex:selectList>
            </apex:pageBlockSection>
            <!-- ====== Account Details====-->
            <apex:outputPanel id="opAcc">
                <apex:pageBlockTable value="{!accList}" var="a" title="Account Information" id="pbt1" columnsWidth="55%,15%,15%,15%" >
                    <apex:outputText value="Account Details" style="font-weight:800"></apex:outputText>
                    <apex:column headerValue="Name">
                        <apex:outputLink value="#" onclick="window.open('/{!a.id}','_blank')">{!a.Name}</apex:outputLink>
                    </apex:column>
                    <apex:column value="{!a.phone}"  />
                    <apex:column value="{!a.rating}"  />
                    <apex:column value="{!a.type}" />
                </apex:pageBlockTable>
            </apex:outputPanel>
            
            <apex:outputPanel id="op111">
                <apex:dataTable value="{!conList}" var="cons" id="accTable" >
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="Name" /></apex:facet>
                        <apex:outputText value="{!cons.name}"/>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
                        <apex:outputText value="{!cons.phone}"/>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="accountId" /></apex:facet>
                        <apex:outputText value="{!cons.accountId}"/>
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header"><apex:outputLabel value="Phone" /></apex:facet>
                        <apex:outputText value="{!cons.phone}"/>
                    </apex:column>
                    
                </apex:dataTable> 
            </apex:outputPanel>
            
            
        </apex:pageBlock>
    </apex:form>
</apex:page>






 
Nik shNik sh
Hi Khan Anas ,
Thank you for repltying,but I am stucking after clicking on the records the jquery Table disappears,I have seen the example which you have been shared but still not working fine.
I am using oncomplete on action support but not wokring.
please have a look into code:

    </style>
            <script type="text/javascript" charset="utf8">
This is for at the time of Loading the Page
j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var accTable = j$('[id$="accTable"]').DataTable({
                });
This is I am trying after clickin on records the records display in form of Jquery Table but disappears. 

                 j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var accTable1 = j$('[id$="accTable1"]').DataTable({
                }); 
              
            });



 
DevADSDevADS
Hey Nik Sh,

I hope below code would help - 
public class AccountAndContactRecords{

    public List<Contact> conList{get; set;}
    public Id accountId {get;set;} 
    public boolean display {get;set;}
    
    public AccountAndContactRecords(){
        display = false;
    }
    
    public List<SelectOption> getaccRecords() {
        List<SelectOption> options = new List<SelectOption>();
        for(Account accItr : [SELECT Id, Name FROM Account LIMIT 50]){
            options.add(new SelectOption(accItr.Id, accItr.Name));
        }
        return options;
    }
    
    public void getContacts(){
        display = true;
        conList = [SELECT Id,Name,Email,Phone FROM Contact WHERE accountId=: accountId];
    }
}
  
<apex:page controller="AccountAndContactRecords">

      <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js"/>
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"/>
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css"/>
        <script>
        j$ = jQuery.noConflict();
        
        function applyJS(){
            var accTable = j$('[id$="accTable"]').DataTable({
                 
            });
        }
        </script>
    </head>
    
    <body>
        <apex:form>
            <apex:selectList value="{!accountId}" size="1">
                <apex:selectOptions value="{!accRecords}"/>
                 <apex:actionSupport event="onchange" action="{!getContacts}" oncomplete="applyJS();" reRender="outpanel"/>
            </apex:selectList><p/>
        
        
            <apex:outputPanel id="outpanel">
                <apex:outputPanel rendered="{!display}">
                    <table id="accTable" class="display">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                            <apex:repeat value="{!conList}" var="con">
                                <tr>
                                    <td>{!con.Name}</td>
                                    <td>{!con.Email}</td>
                                    <td>{!con.Phone}</td>
                                </tr>
                            </apex:repeat>
                        </tbody>
                    </table>
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:form>
    </body>
</apex:page>    
Make sure you put appropriate conditions in your controller.

Do post here if you have any questions.

Happy Coding!!