+ Start a Discussion
Michael3.BrownMichael3.Brown 

Need Help Displaying a Total Amount on the 1st Row in My Data Table

Hello, I have a data table I've created on a Visual Force page. This table lists out all my records I've created for a custom Sales object. I was asked to gather the total amount cummulated for each record and display it on the top row (not counting the Header Values). I have come up with the total amount, but I am having trouble getting it to display the way I want.  

 

Here's an example of the layout I need.  I want the Total amount to display directly underneath the header row.

Total   Employee   Amount

$350    Mike            $50

           Steve           $100

           Perry           $150

           Johnson      $50

 

However, here is what I am getting using the following code:

 <apex:column headerValue="Total" width="50">
        <apex:facet name="header"><apex:outputPanel >
        <apex:outputText value="${!Total['sum']}" /></apex:outputPanel></apex:facet>
</apex:column>

 This code takes my header value "Total" and replaces it with the numeric total, so I am seeing:

 

$350    Employee   Amount

            Mike            $50

            Steve          $100

            Perry           $150

           Johnson       $50

 

I also decided to create my Headers using standard <TH> tags, rather than the <column headerValue="">, and then setup my dataTable without column headers.  However, this resulted in the following layout:

 

Total   Employee   Amount

$350

           Mike              $50     

           Steve            $100

           Perry            $150

           Johnson       $50

 

While the total amount is directly underneath the "Total" header, the other records have jumped down a line. Is there a way to get this total amount to display in my first layout?

 

Thanks!

Mike

Best Answer chosen by Admin (Salesforce Developers) 
David81David81

If you really want to go that route, you could do something like this...

 

 

<table>
   <tr><th rowspan="2">Total ${!Total['sum']}</th><th>Employee</th><th>Amount</th></tr>
   <apex:repeat value="{!YOURLIST}" var="a">
      <tr><td>{!a.Name}</td><td>{!a.Amount}</td></tr>
   </apex:repeat>
</table>

 

 

All Answers

David81David81

If you really want to go that route, you could do something like this...

 

 

<table>
   <tr><th rowspan="2">Total ${!Total['sum']}</th><th>Employee</th><th>Amount</th></tr>
   <apex:repeat value="{!YOURLIST}" var="a">
      <tr><td>{!a.Name}</td><td>{!a.Amount}</td></tr>
   </apex:repeat>
</table>

 

 

This was selected as the best answer
Michael3.BrownMichael3.Brown

Thanks David.

 

I will have to play around with that method, as I am not too familiar wih the apex:repeat functionality.

 

I also discovered I could combine standard HTML table creation code with the <apex:dataTable> structure and it seemed to be working.

<TABLE>
<TH> Total </TH>
<TH> Employee </TH>
<TH> Amount </TH>
<TR>
<TD VALIGN="TOP"> <apex:outputText value="${!Total['sum']}" /> </TD>
<TD COLSPAN="2">
     <apex:dataTable>
     // Insert data records here
     </apex:dataTable>
</TD></TR></TABLE>

 

 

Thanks!

Mike

David81David81

I believe that that could will actually render a table within a table, yes?

 

The <apex:repeat> functionality simply allows you to iterate over a list of objects and repeat everything contained within the repeat region for each entry in the list. I've found it very handy for custom/funky table layouts.

Michael3.BrownMichael3.Brown

Yeah, exactly. I have a table built within a table. This apex:repeat sounds like it will make things easier, so i will definitely give it a shot. 

 

Thanks!

Mike

David81David81

Just to muddy the waters a bit...

 

Another option would be to keep the Total outside of the table all together and use the css float property position the table to the right of the total text. You could probably accomplish that will pure visualforce code like this.

 

 

<apex:outputPanel layout="block" id="tableWrapper">
	<apex:outputPanel layout="block" id="totalText" style="width:30px;height:30px;float:left;">
		<apex:outputText value="Total ${!Total['sum']}" />
	</apex:outputPanel>
	<apex:outputPanel layout="block" id="dataTable" >
		<apex:dataTable>
		 // Insert data records here
		</apex:dataTable>
	</apex:outputPanel>
</apex:outputPanel>

 

 

SFDC developer55SFDC developer55
Could you please share the apex code as well.. that you have used to set total?

thank you in advance.