Display the total value of a column below the table PHP

Question

i've set up a table that fetches data from my database and display it on a web page. but i don't know how to get the total value of one of my columns and display it below the table

php code.

foreach($result as $row)
{
 $sub_array = array();
 $sub_array[] = $row['order_id'];
 $sub_array[] = $row['order_customer_name'];
 $sub_array[] = $row['order_item'];
 $sub_array[] = $row['order_value'];
 $sub_array[] = $row['order_date'];
 $sub_array[] = $row['session'];
 $sub_array[] = $row['total'];
 $data[] = $sub_array;
}

Table:

div class="container box">
      <table id="customer_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Order ID</th>
       <th>Customer Name</th>
       <th>Programs</th>
       <th>Price</th>
       <th>Date</th>
       <th>Session</th>
       <th>Total Price</th>
      </tr>
     </thead>
    </table>
    </div>

Javacript code (dataTable): in javascript, there is a code to filter data based on date and can export table data

<script type="text/javascript" language="javascript" >
  function fetch_data(is_date_search, start_date='', end_date='')
 {

    var dataTable = $('#customer_data').DataTable({

   "processing" : true,
   "serverSide" : true,
   "order" : [],
   "ajax" : {
    url:"fetch.php",
    type:"POST",
    data:{
    is_date_search:is_date_search, start_date:start_date, end_date:end_date
    }
   },
   dom: 'lBfrtip',
   buttons: [
    'excel', 'csv', 'pdf', 'copy'
   ],
   "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
  });

}

Answer 1

You can use Datatable column rendering options or other events to manipulate the data or calculating the total.

var globalDataSum=0;
var table =$('#example').DataTable( {
    "columnDefs": [{
       // The `data` parameter refers to the data for the cell (defined by the
       // `data` option, which defaults to the column being worked with, in
       // this case `data: 0`.
       "render": function ( data, type, row ) {
                 globalDataSum+=data;
                 return data;
        },
        "targets": 0
    }]
});

And listen to the data table drawn event. Then update the element

table.on( 'draw', function () {
    $("#total").text(globalDataSum)
} );

If you want to use extensions of the data table to calculate the total, you can refer Data table Sum plugin