Apex Code Development You need to sign in to do that
Don't have an account?
Michael3.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
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
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>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
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.
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
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>thank you in advance.