Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
naveen reddy 19naveen reddy 19 

Table: table inside each row -Jquery

Hi All,

 I have a requirement. I need to display another table inside each row.

The folowing is the sample code I'm trying and  also attaching the output.
  
<apex:page sidebar="false" standardController="Account" >
    

    <apex:includeScript value="{!$Resource.Jquery}"/>
    <apex:stylesheet value="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
    <apex:includeScript value="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"/>
  
    <script>
    $(document).ready(function() {
    $('table.display').DataTable();
} );
    </script>
    
    <style>
    div.dataTables_wrapper {
        margin-bottom: 3em;
    }
    </style>
    <apex:form >
    <apex:pageblock >
    <apex:pageBlockButtons >
    <apex:commandButton value="SSSSSSS"/>
    </apex:pageBlockButtons>
    <table id="" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
       
       
        <apex:repeat value="{!Account.Opportunities}" var="opp" >
            <tr>
                <td><apex:inputCheckbox /></td>
                <td>{!opp.name}</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                
            </tr>
            
          
              
        </apex:repeat>     
        
    </table>
    </apex:pageblock>
    </apex:form>
</apex:page>

User-added image

I need a table like as shown in below screenshot which should have all functionalities  like pagenation,auto suggestion search etc.. from above code.

User-added image




can some one please help me.

***Any help is really appreaciated.

Thanks,
Naveen.

 
Pankaj_GanwaniPankaj_Ganwani
Hi Naveen,

Please find the attached sample code to accomplish your requirement:
  
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>

<apex:repeat value="{!Accounts}" var="objAcc">

<tr>
<td></td>
<td></td>
</tr>
<apex:repeat value="{!objAcc.Opportunities}" var="objOpp">
<tr>
<td></td>
<td></td>
</tr>
<apex:repeat>
</apex:repeat>
naveen reddy 19naveen reddy 19
Hi Pankaj,

   Able to dispaly table inside each row. But pagenation is not working. 
You can find same in my second screen shot in above post.

Thanks,
Naveen.
Pankaj_GanwaniPankaj_Ganwani
Hi,

You will have to use below mentioned code within document.ready:
  
$("#myDataTable").dataTables({
     "bJQueryUI":true,
      "bSort":false,
      "bPaginate":true,
      "sPaginationType":"full_numbers",
       "iDisplayLength": 10
});

 
naveen reddy 19naveen reddy 19
Hi Pankaj,

  I tried using above code. But its not giving proper output. Please let me know what extra changes to be done. here is my code.
  
<apex:page sidebar="false" controller="dataTableCont" >
    
    
    <apex:includeScript value="{!$Resource.Jquery}"/>
    <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.map"/>
    <apex:stylesheet value="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
    <apex:includeScript value="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"/>
    
    <script>
    $(document).ready(function() {
        $('table.display').DataTable();
    } );
    </script>
    
    <script>
    $("#display").dataTables({
        "bJQueryUI":true,
        "bSort":false,
        "bPaginate":true,
        "sPaginationType":"full_numbers",
        "iDisplayLength": 10
    });
    </script>
    
    <style>
        div.dataTables_wrapper {
        margin-bottom: 3em;
        }
    </style>
    <apex:form >
        <apex:pageblock >
            <apex:pageBlockButtons >
                <apex:commandButton value="SSSSSSS"/>
            </apex:pageBlockButtons>
            <table id="" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        
                    </tr>
                </thead>
                
                
                <apex:repeat value="{!Accounts}" var="acc" >
                    <tr>
                        <td><apex:inputCheckbox /></td>
                        
                        <td>{!acc.name}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <apex:repeat value="{!acc.Contacts}" var="con">
                        <tr>
                            <td></td>
                            <td></td>
                            <td>{!con.firstname}</td>
                            <td>{!con.lastname}</td>
                        </tr>
                        
                    </apex:repeat>            
                </apex:repeat>     
                
            </table>
        </apex:pageblock>
    </apex:form>
</apex:page>
  
public class dataTableCont {

public List<Account> getAccounts()
{
 return [Select Name,Id,(select firstname,lastname from contacts) from account limit 3];
}
}

User-added image


Thanks in advance.
Naveen
Pankaj_GanwaniPankaj_Ganwani
<apex:page sidebar="false" controller="dataTableCont" >
    
    
    <apex:includeScript value="{!$Resource.Jquery}"/>
    <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.map"/>
    <apex:stylesheet value="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
    <apex:includeScript value="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"/>
    
    <script>
   $(document).ready(function() 
                    {
                        $('#Details').dataTable(
                            {
                             "bFilter":true,               
                             "bLengthChange":true,
                             "bPaginate":true,
                             "info":true
                            }
                        );
                    });
    </script>
    
    <style>
        div.dataTables_wrapper {
        margin-bottom: 3em;
        }
    </style>
    <apex:form >
        <apex:pageblock >
            <apex:pageBlockButtons >
                <apex:commandButton value="SSSSSSS"/>
            </apex:pageBlockButtons>
            <table id="Details" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        
                    </tr>
                </thead>
                
                
                <apex:repeat value="{!Accounts}" var="acc" >
                    <tr>
                        <td><apex:inputCheckbox /></td>
                        
                        <td>{!acc.name}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <apex:repeat value="{!acc.Contacts}" var="con">
                        <tr>
                            <td></td>
                            <td></td>
                            <td>{!con.firstname}</td>
                            <td>{!con.lastname}</td>
                        </tr>
                        
                    </apex:repeat>            
                </apex:repeat>     
                
            </table>
        </apex:pageblock>
    </apex:form>
</apex:page>

I made some edits in your code. Please refer them and let us know if you face any issues.
naveen reddy 19naveen reddy 19

Here is the output from above code. This is also not giving proper output.


User-added image
Pankaj_GanwaniPankaj_Ganwani
Hi Naveen,

Where exacly you are facing the issue? Can you please try the pagination functionality with more than 50 records?
naveen reddy 19naveen reddy 19
From above screenshot contacts are not showing under each account.