Datatables footer callback coming back NaN for all row total

cxwilson

I'm new to using datatables and for some reason when I implement the footercallback code referenced here: https://www.datatables.net/examples/advanced_init/footer_callback.html my page 'total over all pages for the amount column keeps coming back as NaN. The total per page works fine.

Html:

``<div class="col-lg-9 table-responsive" id="tableCont">
<div class="dataTables_paginate"></div>
<table style="width:2850px;" class="table table-bordered table-hover table-striped table-responsive" id="fundQueryDataTbl"
       data-body="@Url.Action("GetFundingData", "FundingProfiles", new { fundingYear = Model.FiscalYear })"
       data-header="@Url.Action("GetColumnNames", "FundingProfiles", new { fundingYear = Model.FiscalYear })">
    <thead>
        <tr></tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

Script:

``$('#fundQueryDataTbl').DataTable({
    initComplete: function () {
        //Column names identified as DDL search - 5/6/16
        var txtSearchNames = ['Funding Category', 'Funding Subcategory', 'Award Class', 'Grant Class Desc', 'Grant Type Desc', 'Us Territory'];

        this.api().columns().every(function () {

            var column = this;
            var columnName = $(this.header()).text();

            //Certain columns were decided upon to have text searches as opposed to DDL. 
            if (txtSearchNames.indexOf(columnName) > -1) {

                //Client wanted title to have / in it - cannot set that in FQ Model prop name.
                if (columnName === "Us Territory") {
                    $(this.header()).text('US/Territory');
                    this.draw();
                }

                var select = $('<select class="form-control"><option value=""></option></select>')
                    .appendTo($(column.header())).on('change', function () {

                        var val = $.fn.dataTable.util.escapeRegex($(this).val());

                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                    });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });


            } else {

                $('<input type="text" placeholder="Search" class="form-control">')
                    .appendTo($(column.header())).on('keyup change', function () {

                        column.search(this.value).draw();
                    });
            }


        });
    },

    //responsive: true,        
    ordering: false,
    bPaginate: true,
    deferRender: true,
    scrollY: '80vh',
    scrollX: true,
    autoWidth: false,
    dom: 'Brtip',
    buttons: [
        { extend: 'pageLength' },
        $.extend(true, {}, cleanHeaderRow, {
            extend: 'excel',
            text: 'Save in Excel'
        }),
        $.extend(true, {}, cleanHeaderRow, {
            extend: 'csv',
            text: 'Save in CSV'
        })
    ],
    ajax: {
        "url": url,
        "dataSrc": ""
    },
    "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(16)
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);


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

        // Update footer
        $(api.table().footer()).html(
            '$ ' + pageTotal + '  ' + total
        );

        $(tfoot).find('th').eq(0).html('$' + pageTotal + ' over all total: $' + total);
    },
    columns: declareColumns(columnKeys)
});

**Datatable image: **