Remove From My Forums

How to find running total in data table

Question

User-1355965324 posted

How can I find the running total in my JS datatable. Please any help would be very appreciated. I have to find the running total in the 3rd column please help

<table id=tbl>
  <thead>
    <tr>
      <th>Name</th>
      <th>Mark</th>
      <th>Running Total</th>
    </tr>
  </thead>
   <tbody>
            <tr>
                <td>XXXXX</td>
                <td>20</td>               
            </tr>
            <tr>
                <td>YYYY</td>
                <td>20.30</td>
            </tr>
            <tr>
                <td>ZZZZ</td>
                <td>25.45</td>
            </tr>
<tr>
                <td>AAA</td>
                <td>-3.45</td>
            </tr>
             
             

        </tbody>
</table>

Tuesday, May 21, 2019 11:59 AM

All replies

User-2054057000 posted

Give the column some CSS class:

<tr>
    <td>ZZZZ</td>
    <td class="yourclass">25.45</td>
</tr>

And then use the below JavaScript code to loop through this column and get the sum:

 var fields= document.getElementsByClassName('yourclass');
    var sum = 0;
    for (var i = 0; i < fields.length; ++i) {
        var item = fields[i];  
         sum += parseInt(item.innerHTML);
    }

alert(sum);

Tuesday, May 21, 2019 12:10 PM

0

Sign in to vote

User-1355965324 posted

I am using javascript datatable. The code using loop causes very delay to bring the record in datatable

Tuesday, May 21, 2019 12:57 PM
0

Sign in to vote
User-2054057000 posted

I am using javascript datatable. The code using loop causes very delay to bring the record in datatable

Then you run the code after few seconds time. See the below code runs the code after 4 seconds time:

setTimeout(function(){ var fields= document.getElementsByClassName('yourclass'); var sum = 0; for (var i = 0; i < fields.length; ++i) { var item = fields[i]; sum += parseInt(item.innerHTML); } alert(sum); }, 4000);

I do the delay using JavaScript's setTimeout method.

I hope it solves your problem.

Thanks...
Tuesday, May 21, 2019 1:03 PM

User-893317190 posted

Hi polachan,

Are you using this https://datatables.net/ ?

If so ,not sure why you add three th while your td only have two in a row.

I suggest you could add total at footer place and using jquery datatable's footerCallback.

You could get total in the callback.

Below is sample code.

   <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
   
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
     

                  <table id="tbl">
                    <thead>
                 <tr>
                   <th>Name</th>
                   <th>Mark</th>
                   
                  </tr>
                    </thead>
   <tbody>
            <tr>
                <td>XXXXX</td>
                <td>20</td>               
            </tr>
            <tr>
                <td>YYYY</td>
                <td>20.30</td>
            </tr>
            <tr>
                <td>ZZZZ</td>
                <td>25.45</td>
            </tr>
<tr>
                <td>AAA</td>
                <td>-3.45</td>
            </tr>
             
             

        </tbody>
                      <tfoot>
    <tr>
                <th  style="text-align:left" >Running Total:</th>
                <th  style="text-align:left" ></th>
            </tr>
        
    </tfoot>
</table>
   

    <script>
      
        $(document).ready(function () {
          var table=  $("[id*='tbl']").DataTable(
                {
                    "footerCallback": function (row, data, start, end, display) {
                        var api = this.api();
                  
                        var total = api
                            .column(1)  // get column 1 , which is mark
                            .data()
                            .reduce(function (a, b) {
                                return parseFloat(a) + parseFloat(b);  // calculate the mark column
                            });
                  
                      $( api.column(1).footer()).html(  // update the footer using the  total of mark column
                            total
                                );

                  }

                    
                })
          
});
    </script>

The result.

Here is Footercallback doc https://datatables.net/reference/option/footerCallback

Best regards,

Ackerly Xu

Wednesday, May 22, 2019 2:35 AM

0

Sign in to vote

User-1355965324 posted

Ackerly Many Thanks for the reply. I am looking for the cumulative total not net total

Yes I am using the datatable,net. I am looking for how to create the cumulative total in datatable .net

For example please can you go through the given example. Here I want to calculate the cumulative total automatically. At the moment the cumulative total I have added manually in the html

linkhttps://jsfiddle.net/yawrud49/

Wednesday, May 22, 2019 5:20 AM

User-893317190 posted

Hi polachan ,

DataTable have provided api that could update cells.

Below is a sample.

                  <table id="tbl">
                    <thead>
                 <tr>
                   <th>Name</th>
                   <th>Mark</th>
                    <th>total</th>
                  </tr>
                    </thead>
   <tbody>
            <tr>
                <td>XXXXX</td>
                <td>20</td>   
                <td></td>   
            </tr>
            <tr>
                <td>YYYY</td>
                <td>20.30</td>
                 <td></td> 
            </tr>
            <tr>
                <td>ZZZZ</td>
                <td>25.45</td>
                 <td></td> 
            </tr>
<tr>
                <td>AAA</td>
                <td>-3.45</td>
     <td></td> 
            </tr>
             
             

        </tbody>
                    
</table>
   

    <script>
      
        $(document).ready(function () {
           
          var table=  $("[id*='tbl']").DataTable(
               

            )
            var data = table.rows().data();
            var total = 0;
            data.each(function (value, index) { //loop through each row
                
             var mark = parseFloat(value[1]); // convert mark to float
                total += mark;  // sum up
                value[2] = total; // update value
              table.row( index ).data(value  ).draw(); // make the update take effect
   
              });
          
});
    </script>

The result.

Best regards,

Ackerly Xu

Wednesday, May 22, 2019 9:50 AM

Asked by:

How to find running total in data table

Question

All replies