Auto append table row (at bottom) showing total computation

Question

I have a data to display in html table. The data comes from the 3rd party server(php) using ajax request. The data are well displayed using this code: HTML:

 <table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

And the ajax call where in the data will display on success ( success: function(data, status, jqXHR){ ):

data.forEach(function(row) {
                    var productname = row.uproducts_product;
                    var productico = productname.replace(/\s+/g, "-") + '.png';
                    
                    var productcost = row.uproducts_total_investment;
                    
                    var str = '<tr>'; 
                    str += '<td>' + '<img class="product_icon" src="images/products/icon-'+ productico +'">' + '<div class="productname">'+ row.uproducts_product + '</div></td>';
                    str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' +  row.uproducts_date + '</span></div> </td>';
                    str += '<td><span class="textinfo">' + row.uproducts_quantity + '</span></td>';
                    str += '<td><span class="textinfo">' + productcost + '</td>';
                    str += '</tr>';
                    
                    $('#tbl-product').append(str);
                   
                });

So, the items are displayed like this

product | date | quantity | cost

A | 12-01-2015 | 2 | 2,100

B | 01-04-2016 | 4 | 5,300

But below the product items, I want to add a row which auto compute the total quantity as well as the total cost. Example:

product | date | quantity | cost

A | 12-01-2015 | 2 | 2,100.00

B | 01-04-2016 | 4 | 5,300.00

Total | 6(quantity) | 7,400.00(cost)

Updated1 Alternatives: I created an alternative here, I added a variable for the computed total in the array where the server respond it as json data. So the data now look like this:

[{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"investment":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"date":"2015-03-01",
"cost":"1500"
},
{
"total_qty":"2"
"total_cost":"4500"
}]

So, If I use this method, is it easier to append it as a row below the product items? How?

score 1 · Accepted Answer · edited May 23 '17 at 11:58

You've to declare variables for quantity and for total before foreach loop and then add values to it. Finally append a new tr after the each loop with values.

Your code would look like this:

var qty = 0,
  total = 0;

data.forEach(function(row) {
  var productname = row.uproducts_product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.uproducts_total_investment;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + row.uproducts_product + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.uproducts_date + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.uproducts_quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.uproducts_quantity))
    qty += parseFloat(row.uproducts_quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');

Explanation:

var qty = 0, total = 0; Declare variables and set it's value to 0. More details.
if (!isNaN(row.uproducts_quantity)) will check whether row.uproducts_quantity value is a number or not. More details.
parseFloat(row.uproducts_quantity) will convert the string to integer. More details.
qty += parseFloat(row.uproducts_quantity); will add the value to qty variable in each loop.
total.toFixed(2) will convert the number into a string, keeping only two decimals. More Details

Updated as per OP question updates

First of all your json data is not in correct format. Second one you can use jquery $.eachjquery each to iterate through the json object. Refer jquery loop on Json data using $.each and jQuery looping .each() JSON key/value not working

var data = [{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-01-04",
"cost":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-03-01",
"cost":"1500"
}];

$(function(){
  var qty = 0,
  total = 0;

$.each(data, function(i, row) {
  var productname = row.product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.cost;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + productname + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.open + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.quantity))
    qty += parseFloat(row.quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');
  
});

table {
  width:100%;
  border-collapse:collapse;
}
table th, table td {
  border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

jsfiddle output.

Just compare the json object with the example object I have created here. And you can use the server sided sum amount if you use for (i=0; i > (obj.length-1); i++) loop and finally get the last object key and value for total row.

Thank you for posting your answer. I tried to run your code but the append of row doesn't work. — c.k, Jul 11 '16 at 05:45
Your answer was so clear, I was able to follow it easily. Thank you for the sample code, references and to your time. — c.k, Jul 11 '16 at 07:32
Just a quick question. How I can display this (`parseFloat(row.total_profit).toFixed(2)`) with a comma when the number is thousands. Example 1000.00 to 1,000.00? i have tried this short method `parseFloat(row.total_profit).toFixed(2).toLocaleString()` but nothing change. — c.k, Jul 12 '16 at 03:31
@c.k http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript and http://stackoverflow.com/questions/3753483/javascript-thousand-separator-string-format may be helpfull to you. please check it out. — Ravimallya, Jul 12 '16 at 04:17

score -1 · Answer 2 · answered Jul 11 '16 at 04:25

-1

There is no way to show summary automatically. You need create other variable in server side and then compute value from list objects to this variable. Bind summary variable to html as a normal row.

answered Jul 11 '16 at 04:25

Hà Tây Quê Rượu

233
2
12

Who said it's not possible to sum up the values in foreach loop, in javascript, if you get values? See my answer above. – Ravimallya Jul 11 '16 at 04:36

Auto append table row (at bottom) showing total computation

2 Answers2

Explanation:

Updated as per OP question updates