footerCallback Column Sums

SalientAnimal

Hi there,

I am having a issue with getting the sum total of a column in the DataTable. I have looking through another of questions that have been asked, and have tried the some of the different solutions offered, however I keep getting a > $NaN error.

Below is my code for the DataTable:

$(document).ready(function () {
    $("#staffdatabase").DataTable({

            footerCallback: function ( row, data, start, end, display ) {
            var api = this.api();
            // 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

                if (api.column(3).data().length){
                var total = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                return intVal(a) + intVal(b);
                } ) }
                else{ total = 0};


            // Total over this page

            if (api.column(3).data().length){
            var pageTotal = api
                .column( 3, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                } ) }
                else{ pageTotal = 0};

            // Update footer
            $( api.column(3).footer() ).html(
                '$'+pageTotal
            );
        },


        // "paging": true,
        //I = Info - SHOWS THE TOTAL NUMBER OF RECORDS IN THE RETURNED DATASET
        //F = Search - SHOWS THE SEARCH FIELD, WHICH ALLOWS FOR QUICK FILTERING
        //L = Menu Length - SHOWS THE MENU LENGTH OPTION, ALLOW TO SET THE NUMBER OF RECORDS DISPLAYED ON THE PAGE
        //P = SHOWS THE PAGE NUMBERS, ALLOWING FOR QUICK NAVIGATION BETWEEN PAGES
        // "searching": true,
        // "scrollX": true,
        "info": true,        
        "ordering": true,
        "autoWidth": true,

    });

});

colin

Hi @SalientAnimal ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SalientAnimal

Hi there Colin,

I realised that the issue with my code is because I am returning my results into a form field within the datatable. This seems to cause the calculation to fail.

This is how I was gathering the data:
'<td><input type="text" name="id[]" value="' . $id. '" readonly style="border: none; background: transparent"></td>'

I have subsequently changed my code to the below, and this has resolved the issue.
'<td>' . $row['id']. '</td>';

I'm not sure why the first option would not work?