DatatablesTwoFooters

HTML

<!DOCTYPE html>
<html>
  <head>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
   <link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
    
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js">
	</script>
        <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.js"></script>
	<script type="text/javascript" language="javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js">
	</script>
  </head>
<table id="myTable" class="display">
  <thead>
    <tr>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
    </tr>
    <tr>
      <td>123</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <!-- populated in js -->
    </tr>
  </tfoot>
</table>
</html>

JavaScript

$(document).ready(function () {
    $('#myTable').DataTable({
    		dom: 'Brtlip', // buttons, processing display, table, length, information, pagination
        scrollY: "400px",
        scrollX: true,
        footerCallback: function (tfoot, data, start, end, display) {
            var api = this.api();
            
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };
 
            // Total over this page
            sum = api
                .column(0, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Update footer
            $(tfoot).html('<b>Total: </b>' + sum);
        },
    });
});