no footer being generated

grahampcharles

I'm trying to add totals in a footer, but no footer is generated. DataTables (1.10.5) is doing all the table creation: the HTML is simply

 <table id="dataTable"></table>

And the script, straight from the footerCallback example:

$("#dataTable").DataTable(
        {
            "data": $.animal.page.data.viewModel, 
            "columns": [
                { "data": "Site", title: "Site" },
                { "data": "Species", title: "Species" },
                { "data": "AnimalCount", title: "Count" }
            ],                
            "footerCallback": function (row, 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(2)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    });

                // Total over this page
                pageTotal = api
                    .column(2, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Update footer
                $(api.column(2).footer()).html(
                    pageTotal + ' ( ' + total + ' total)'
                );
            }

        });

footerCallback does get called, but there's no TFOOT element (and the table in fact is styled with "no-footer").

How do I get the TFOOT to be generated like the THEAD is?

Thanks,

g.