datatables sum columns footer

by lucanttdata

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<table id="storages"></table>

CSS

.footer {
    text-align:right;
    font-weight:bold;
    padding:8px 10px;
}

.align-right {
    text-align:right;
}

JavaScript

var dataSet = [
    {name: "storage101", size: 492, A: "1", B: "2", C: "Prova"},
    {name: "storage102", size: 742, A: "1", B: "2", C: "Prova"},
    {name: "storage103", size: 423, A: "1", B: "2", C: "Prova"}
]


$("#storages").dataTable({
    data: dataSet,
    columns: [
        {title: "Name", data: "name"},
        {title: "Size", data: "size", "className": "sum"},
        {title: "AAA", data: "A", "className": "sum"},
        {title: "BBB", data: "B", "className": "sum"},
        {title: "CCC", data: "C"}
    ],
    fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) {
        var api = this.api();
        var foot = $("#storages").find('tfoot');
   			foot = $('<tfoot>').appendTo("#storages");
        
        api.columns('.sum', { page: 'current' }).every(function(x) {

							var sum = this.data().reduce(function(a, b) {
							    var x = parseFloat(a) || 0;
								var y = parseFloat(b) || 0;
								return x + y;
							}, 0);
              console.log(sum)
              foot.append($('<td>'+sum+'</td>'));
				});
    		
        
    }
});

$("#storages").append(
      $('<tfoot/>').append( $("#storages thead tr").clone() )
);