Question posted in
You can find the official documentation here.

get total of a dynamically loaded table's column – Jquery ajax

I am loading a table with the following jquery

function get_sales(customer_id,from_date,to_date){
         $.ajax({
            type: 'POST',
            url: 'ajax/sale_pl.php',
            data:{customer_id:customer_id,from_date:from_date,to_date:to_date},            
            dataType:"json",            
            success: function(response){ //console.log(response);                
                for(i=0; i<response.length; i++)
                {
                    $('#tdata').append('<tr>'+
                    '<td><a href="view_invoice.php?id='+response[i].invoice_id+'">'+response[i].invoice_id+'</a></td>'+
                    '<td>'+response[i].order_date+'</td>'+
                    '<td><h6 class="mb-1">'+response[i].product_name+'</h6></td>'+
                    '<td><h6 class="text-muted">'+response[i].product_code+'</h6></td>'+
                    '<td>'+response[i].sold_qty+'</td>'+
                    '<td>'+response[i].buy_price+'</td>'+
                     '<td>'+response[i].sell_price+'</td>'+                    
                    '<td>'+response[i].discount+'</td>'+                    
                    '<td>'+response[i].cost_price+'</td>'+
                    '<td>'+response[i].sold_price+'</td>'+
                    '<td class="profits">'+response[i].profit+'</td>'
                         + '</tr>'
                        );
                }                        
            }
        });
     }

here is my html code for the table

 <table class="table table-hover">
     <thead>
       <tr>
           <th>Invoice id</th>
           <th>Invoice Date</th>
           <th>Product Name</th>
           <th>Product Code</th>
           <th>Sale Qty</th>
           <th>Buy Price</th>
           <th>Sale Price</th>
           <th>Discount</th>
           <th>Cost Price</th>
           <th>Sold Price</th>
           <th>Profit</th>
          </tr>
       </thead>
       <tbody id="tdata">                                     
        </tbody>
       <tfoot>
          <tr>
             <th colspan='10'>Total Profit</th>
              <th id="total_profit">0</th>
           </tr>
         </tfoot>
        </table>

what i am trying is to get the total of the profit column. I have tried the following one

function calcSub(){
    var totalProfit= 0;
    $(".profits").each(function(){
        totalPrice += parseInt($(this).val());
        $("#total_profit").html(totalPrice);
    });
};

but this is not working.

Please suggest me the solution. I am new to jQuery. Thanks in advance for help.

Tags:

2

Answers


  1. 0

    It might be a typo

    var totalProfit= 0

    need to be

    var totalPrice= 0

    Also you need to set the total value after you finish the iteration,full code listed below:

    function calcSub(){
    var totalPrice= 0;
    $(".profits").each(function(index,element){
        totalPrice += parseInt($(element).text());//also,need to use text() instead of value()
    });
    $("#total_profit").html(totalPrice);//set profit after you finish the iteration
};
    Login or Signup to reply.
  2. 0

    You need to use .text() not .val(). .val() is used when you are getting an input value. But in your case its simply getting the .text() of your td items.

    Edit: Since the two (get_sales and calcSub()) functions are running simultaneously you need to use async function on and wait for the await for ajax to be completed on success before proceeding to calcSub() for your calculations

    Add this code your file:

    //get sales
async function get_sales(customer_id, from_date, to_date) {
  //Await for this to finish and then call total profit
  await $.ajax({
    type: 'POST',
    url: 'color.json',
    data: {
      customer_id: customer_id,
      from_date: from_date,
      to_date: to_date
    },
    dataType: "json",
    success: function(response) { //console.log(response);                
        for (i = 0; i < response.length; i++) {
          $('#tdata').append('<tr>' +
            '<td><a href="view_invoice.php?id=' + response[i].invoice_id + '">' + response[i].invoice_id + '</a></td>' +
            '<td>' + response[i].order_date + '</td>' +
            '<td><h6 class="mb-1">' + response[i].product_name + '</h6></td>' +
            '<td><h6 class="text-muted">' + response[i].product_code + '</h6></td>' +
            '<td>' + response[i].sold_qty + '</td>' +
            '<td>' + response[i].buy_price + '</td>' +
            '<td>' + response[i].sell_price + '</td>' +
            '<td>' + response[i].discount + '</td>' +
            '<td>' + response[i].cost_price + '</td>' +
            '<td>' + response[i].sold_price + '</td>' +
            '<td class="profits">' + response[i].profit + '</td>' +
            '</tr>'
          );
        }
    }
  });
  
  //call calculate total
  calcSub()
}

get_sales();

function calcSub() {
  var totalProfit = 0;
  $(".profits").each(function() {
    totalProfit += parseInt($(this).text());
    $("#total_profit").html(totalProfit);
  });
};

    Complete Working Demo as per the question

    var response = [{
  "invoice_id": "Always Helping",
  "order_date": "03-02-2002",
  "product_name": "Always B +",
  "product_code": "[email protected]",

  "sold_qty": "2",
  "buy_price": "2",
  "sell_price": "2",
  "discount": "2",
  "cost_price": "2",
  "sold_price": "2",
  "profit": "50",
}, {
  "invoice_id": "Blah Blah",
  "order_date": "03-02-2002",
  "product_name": "Always B +",
  "product_code": "[email protected]",

  "sold_qty": "2",
  "buy_price": "2",
  "sell_price": "2",
  "discount": "2",
  "cost_price": "2",
  "sold_price": "2",
  "profit": "500",
}]


for (i = 0; i < response.length; i++) {
  $('#tdata').append('<tr>' +
    '<td><a href="view_invoice.php?id=' + response[i].invoice_id + '">' + response[i].invoice_id + '</a></td>' +
    '<td>' + response[i].order_date + '</td>' +
    '<td><h6 class="mb-1">' + response[i].product_name + '</h6></td>' +
    '<td><h6 class="text-muted">' + response[i].product_code + '</h6></td>' +
    '<td>' + response[i].sold_qty + '</td>' +
    '<td>' + response[i].buy_price + '</td>' +
    '<td>' + response[i].sell_price + '</td>' +
    '<td>' + response[i].discount + '</td>' +
    '<td>' + response[i].cost_price + '</td>' +
    '<td>' + response[i].sold_price + '</td>' +
    '<td class="profits">' + response[i].profit + '</td>' +
    '</tr>'
  );
}


function calcSub() {
  var totalProfit = 0;
  $(".profits").each(function() {
    totalProfit += parseInt($(this).text());
    $("#total_profit").html(totalProfit);
  });
};

calcSub()
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Invoice id</th>
      <th>Invoice Date</th>
      <th>Product Name</th>
      <th>Product Code</th>
      <th>Sale Qty</th>
      <th>Buy Price</th>
      <th>Sale Price</th>
      <th>Discount</th>
      <th>Cost Price</th>
      <th>Sold Price</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody id="tdata">
  </tbody>
  <tfoot>
    <tr>
      <th colspan='10'>Total Profit</th>
      <th id="total_profit">0</th>
    </tr>
  </tfoot>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search