title: Datatables "footerCallback" function not displaying results in footer
body: <p>I am try to get a sum of each column and display the result in the footer. I'm using <a href="https://datatables.net/reference/option/footerCallback" rel="nofollow noreferrer">"footerCallback"</a> function that Datatables provides. However it is not displaying anything in the footer</p>
  
  <p>Datatables explains </p>
  
  <blockquote>
    <p>"Note that if the table does not have a tfoot element, this callback
    will not be fired."</p>
  </blockquote>
  
  <p>So I've added tfoot to the table so the callback will be fired</p>
  
  <pre><code>&lt;table id="monthlytable" class="display" cellspacing="0" width="100%"&gt;  
  &lt;thead&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;/tfoot&gt;&lt;/table&gt;
  </code></pre>
  
  <p><strong>Callback funtion:</strong></p>
  
  <pre><code>"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));
  }
  </code></pre>
  
  <p>I've tried using <code>"headerCallback"</code> with the same code as above (altered to display in the header) and it works perfectly fine.</p>
  
  <p>Is there a reason why headerCallback works but not footerCallback?</p>