Datatables "footercallback" Function Not Displaying Results In Footer

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 th

Solution 1:

Add this:

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

Solution 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 
});

Solution 3:

//Below code worked for me//Bootstrap table //Below scripts required
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="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);
                  });
                }
            } );

Solution 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) {
                                      returnNumber(Number(a) + Number(b)).toFixed(2);
                                  }, 0 );
                              // Update footer
                              $( api.column( j ).footer() ).html(pageTotal);
                            j++;
                          }
                        },