OK, maybe this footer code is firing before I have data in my table, but other than that I'm completely stumped. I've tried a series of code samples found on this site to no avail.

I have an html table with <thead> and <tfoot> sections. I populate the rows using the sAjaxSource option inside the .dataTable( ) method. My latest attempt uses the "footerCallback" option as follows:

rTable = $('#outputTable').dataTable ( {
  "sAjaxSource": 'somesourcewebservice',

  "sAjaxDataProp": 'DATA',

  "footerCallback": function (row, data, start, end, display) {

     var api = this.api();

     var aCol = api.column(7);

     var foo = aCol.data();  //is empty!

     $(aCol.footer()).html(

        aCol.data().reduce(function(a,b) {  return a+b; })  //throws an error of "reduce of empty array with no intial value!

     );

 }

});

I've also tried using the:

$('#outputTable').on('xhr.dt', function (e, settings, json) {

});

approach after the .dataTable( ) call, but that didn't work either. I've also used .DataTable syntax as well.

Any thoughts? I don't know my data (BTW, column 7 is comprised of integer values) until it comes back from the web service. Is there another event handler that I need to place this code in so that I know there are column values available?

Thanks.