Datatables “footerCallback” function not displaying results in footer

AlexHollingsworth

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?

AlexHollingsworth

I've managed to fix the issue now. The footer wasn't being 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. You also need to put $("#monthlytable").append('<tfoot><th></th></tfoot>'); above where you initialise data tables.