Grand total of a particular column in PageTable/Datatable/repeat

Output

By default salesforce doesn't have option to display SUM of column values in PageBlock Table / Repeat / DataTable we can achieve by a simple hack using Javascript and Apex:variable

This example explains how to add/Sum up Column values in Contacts, Following are code snippets responsible for displaying Total Cell

  • Initiate Apex:variable on top of PageBlockTable / Repeat / DataTable
    <apex:variable value="{!0.00}" var="Total"/>

  • Below code snippet is for adding column/Cell values, Facet is important here as it responsible for naming footer

<apex:column headerValue="Amount">
   <apex:outputField value="{!con.Amount__c}"/>
   <apex:variable var="Total" value="{!Total + con.Amount__c}"/>
   <!-- Footer of the first Cell -->
   <apex:facet name="footer">
      Total: <span class="amountSum"></span>
   </apex:facet>
</apex:column>   
  • Now display it using Javascript as shown
document.getElementsByClassName('amountSum')[0].innerHTML = '{!Total}';    

Working code for **Visualforce Page [here](https://github.com/thephani/My-Dev-Org/blob/master/pages/PageBlockTable_FooterSum)**