Friday, September 7, 2018

Calculate Total Sum of Column in PageBlockTable In Visualforce Using Jquery

Some Particular Scenarios we need to Calculate the total sum value Based on User Enter Values in Text Boxes in PageBlockTable.

Recently I Faced this Scenario We can Resolve The Scenario By Using JavaScript or Jquery.
This Code work on input Event, You can Use any Event Based on Your Requirement(onchange, onblur, onfocus etc).


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
         $(document).on("input", ".pricevalue", function (e) {
            var sum = 0;
            $('.pricevalue').each(function(){
                var num = $(this).val();
                if(num != 0 && !isNaN(num)) {
                    sum += parseFloat(num);
                }
            });
            $(".outputPrice").text(sum.toFixed(2));
        });
    });
    </script>
And This Is the Column Code in PageBlockTable
<apex:column headerValue="Unit Price">
  <apex:inputText value="{!wd.dUnitPrice}" styleClass="pricevalue" id="unitpric" />
  <apex:facet name="footer">
    <apex:outputText id="totalPrice" value="{!dSumValue}" styleClass="outputPrice" />
  </apex:facet> 
</apex:column>

Check Screenshot For More information
Let us know if you have any queries.
Happy Learning!

No comments:

Post a Comment