Datatables “footerCallback” function not displaying results in footer

Question

I am try to get a sum of each column and display the result in the footer. I'm using "footerCallback" function that Datatables provides. However it is not displaying anything in the footer

Datatables explains

"Note that if the table does not have a tfoot element, this callback will not be fired."

So I've added tfoot to the table so the callback will be fired

<table id="monthlytable" class="display" cellspacing="0" width="100%">  
<thead></thead><tfoot></tfoot></table>

Callback funtion:

"footerCallback": function ( tfoot, data, start, end, display ) {
var api = this.api(), data;

// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
    i.replace(/[\$,]/g, '')*1 :
    typeof i === 'number' ?
    i : 0;
};

// Total over all pages
total = api
  .column( 3 )
  .data()
  .reduce( function (a, b) {
        return intVal(a) + intVal(b);
    }, 0 );

// Update footer
var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '£' ).display;
    $( api.column( 3 ).footer() ).html(numFormat(total));
}

I've tried using "headerCallback" with the same code as above (altered to display in the header) and it works perfectly fine.

Is there a reason why headerCallback works but not footerCallback?

Answer 1

Add this:

buttons: [{ extend: 'print',
            footer: true }]

Answer 2

The problem was the footer wasn't found.

I had to add the footer using $("#monthlytable").append('<tfoot><th></th></tfoot>');

You need to ensure the amount of <th> tags within the <tfoot> match the number of table headings your table has (This also needs to include hidden columns). So 5 table headings means 5 <th> tags, such as: $("#monthlytable").append('<tfoot><th></th><th></th><th></th><th></th><th></th></tfoot>');

You also need to put $("#monthlytable").append('<tfoot><th></th></tfoot>'); above where you initialise data tables.For example:

$("#monthlytable").append('<tfoot><th></th></tfoot>');
var table = $('#monthlytable').DataTable({
// datatable elements 
});

Answer 3

//Below code worked for me
//Bootstrap table 
//Below scripts required
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
$('#divID').html('<table id="tableID"><tr><th>head</th></tr><thead></thead><tbody><tr><td>some data</td</tr><tfoot><tr id="foot"></tr><tfoot></tbody></table>');

var table = $('#tableID').DataTable( {
                    "dom": '<"top"if>t<"bottom"><"clear">',
                    "bSort": false,
                    "paging": false,
                    "bFilter": false,
                "footerCallback": function(row, data, start, end, display) {
                  var api = this.api();
                 var rcnt=0;
                  api.columns('.sum', {
                    page: 'current'
                  }).every(function() {
                    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); //alert(sum);

                    if(rcnt==0){
                        $("#foot").append('<td style="background:#a1eaed;color:black; text-align: center;">Total</td>');
                    }else{
                        $("#foot").append('<td style="background:#a1eaed;color:black; text-align: center;">'+sum+'</td>');
                    }
                    rcnt++;
                    //$(this.footer()).html(sum);
                  });
                }
            } );

Answer 4

  "footerCallback": function ( row, data, start, end, display ) {
                          var api = this.api();
                          nb_cols = api.columns().nodes().length;
                          var j = 2;
                          while(j < nb_cols){
                            var pageTotal = api
                                  .column( j, { page: 'current'} )
                                  .data()
                                  .reduce( function (a, b) {
                                      return Number(Number(a) + Number(b)).toFixed(2);
                                  }, 0 );
                              // Update footer
                              $( api.column( j ).footer() ).html(pageTotal);
                            j++;
                          }
                        },