CODEWITHSUNDEEP
jquerydatatables
pee2pee
pee2pee

Reputation: 3792

DataTables: Footer doesn't get updated depending on the search

Using JQuery datatables, specifically the below function to sum the totals in specific columns

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;

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

        // Update footer
        $( api.column(i).footer() ).html(total);
    }
},

All good so far, totals display.

However when I search a column with something like table.columns(12).search('No',true,false).draw(); the footer does not get updated.

I read https://datatables.net/forums/discussion/41651/should-footercallback-be-called-when-clearing-a-search-filter and it said with draw() being called, it should get update,d but it doesn't

Any advice?

Upvotes: 0

Views: 1775

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58860

You need to specify second argument selector-modifier for all column() API method calls and use { search:'applied' } to apply search when retrieving column data. By default DataTables doesn't apply search when you use column() API method.

For example:

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

Upvotes: 3

Related Questions