Show footer in data table

polachan

I am trying to find the total of 'Net Value' and ' Total Value' in Data Table as footer and the total value should be shown inside td element with the same alignment of its other data column.

<div>
<table id="myTable" class="table table-bordered table-striped" style="width:100%;font-size:90%">
 <thead>
  <tr>
    <th>
       Item
    </th>
    <th>
       Net Value
    </th>
    <th>
       Total Value
    </th>
  </tr>
 </thead>
 <tbody>
   <tr>
      <td>AAA</td>
      <td>200.00</td>
      <td>300.00</td>
    <td>BBB</td>
      <td>300.00</td>
      <td>200.00</td>
   </tr>
 </tbody>
 <tfoot>
    <tr>
       <th>Total</th>
       <td></td>
       <td></td>
    </tr>
</tfoot>
</table>
</div>
<script>
 $(document).ready(function () {
 var table = $('#myTable').DataTable({
     "pageLength": 40,
      scrollY: "500px",
      scrollX: true,
      paging: true,
      dom: 'Bfrtip',
      buttons: [
                { extend: 'copyHtml5', footer: true },
                { extend: 'excelHtml5', footer: true },
                { extend: 'csvHtml5', footer: true },
                { extend: 'pdfHtml5', footer: true }
            ]
 })
})
</script>

allan

Have you seen this example which shows how to calculate a total in a footer?

Allan