How can I get the classname of a column within footerCallback?

Keith_H

Within some of my tables, I set a class on the table header which I use to add totals to colums.
I use 3 class names to indicate the number of decimal places.(sum0, sum2 and sum4).
How I'm creating the totals is by repeating the code within the footerCallback session which is not ideal.

Current Code
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();

    api.columns('.sum0', {}).every(function() {
        var locSum = this.data().reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
        $(this.footer()).html(fncFormatNumber(locSum,0,"Y","Y"));
    });
    api.columns('.sum2', {}).every(function() {
        var locSum = this.data().reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
        $(this.footer()).html(fncFormatNumber(locSum,2,"Y","Y"));
    });
}

What I'd like to be able to do is something like:

"footerCallback": function ( row, data, start, end, display ) {
    var api = this.api();

    api.columns('.sum0,.sum2,.sum4', {}).every(function() {
        var locClass    = *** get the classname ***
        var locDec      = 0;
        switch (locClass)
        {
            case '0'    :   locDec = 0; break;
            case '2'    :   locDec = 2; break;
            case '4'    :   locDec = 4; break;
        }
        var locSum = this.data().reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
        $(this.footer()).html(fncFormatNumber(locSum,locDec,"Y","Y"));
    });
}

Thanks.

kthorngren

You can use column().node() to get the node then use something like jQuery hasClass() to check the class names. This may give you an idea:

    api.columns('.sum0,.sum2,.sum4', {}).every(function() {
        var node    = this.node();
        if ( $(node).hasClass( '.sum0' ) ) {
....

Kevin

Keith_H

Hi Kevin.

I've added the code but I get a console message "Uncaught TypeError: this.node is not a function" on the this.node(); line.

Can you see something I'm missing?

I'm using datatables 1.11.5 for reference.

Thanks.

            , "footerCallback": function ( row, data, start, end, display ) {
                    var api = this.api();
                    var locDec  = 0;
                    api.columns('.sum0,.sum2', {}).every(function() {
                        var node        = this.node();
                        if ( $(node).hasClass( '.sum0' ) ) {locDec  = 0;}
                        if ( $(node).hasClass( '.sum2' ) ) {locDec  = 2;}
                        if ( $(node).hasClass( '.sum4' ) ) {locDec  = 4;}
                        var locSum = this.data().reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
                        $(this.footer()).html(fncFormatNumber(locSum,locDec,"Y","Y"));
                    });
                }

allan

There is no column().node() method - since a column can have multiple cells. I think Kevin meant column().footer() - e.g. this.footer() in this case, just like you already have on line 10, to get the footer cell.

Allan

Keith_H

Thanks.

I changed the logic to use the header and not footer class, as the class is defined in the HTML in the THEAD section.

Working code is now :

, "footerCallback": function ( row, data, start, end, display ) {
        var api         = this.api();
        var locDec  = 0;
        api.columns('.sum0,.sum2,.sum4', {}).every(function() {
            if ( $(this.header()).hasClass( 'sum0' ) ) {locDec  = 0;}
            if ( $(this.header()).hasClass( 'sum2' ) ) {locDec  = 2;}
            if ( $(this.header()).hasClass( 'sum4' ) ) {locDec  = 4;}
            var locSum = this.data().reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
            $(this.footer()).html(fncFormatNumber(locSum,locDec,"Y","Y"));
        });
    }