c.k c.k - 4 months ago 8
Ajax Question

Auto append table row (at bottom) showing total computation

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?

Answer

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.