14

I'm having issues with a tiny detail in inserting the sum value of each column, with class "sum", into its footer.

The code (more or less taken straight from DataTables.net) goes:

var table = $('#example').DataTable();
        table.columns('.sum').each(function (el) {
            var sum = table
                .column(el)
                .data()
                .reduce(function (a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });
            $(el).html('Sum: ' + sum);
        });

"sum" has the correct value but is somehow not inserted into the footer! I.e. its -element shows up empty.

Note that the snippet below works fine, but I want to sum each column with class sum.

var table = $('#example').DataTable();
var column = table.column(4);

$(column.footer()).html(
    column.data().reduce(function (a, b) {
        return parseInt(a, 10) + parseInt(b, 10);
    })
);

////////////////////////////////////////////////////////////////////////////////////

EDIT - Workaround:

I moved the code to where the DataTable is initialized and went with footerCallback instead. See below code:

"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 this page
                    pageTotal = api
                        .column('.sum', { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column('.sum').footer()).html(pageTotal);
                }

Somehow now the value is inserted into the right tfoot element. Still no idea why it wouldn't work in the first place (but as mentioned in comment order of including JS-files could have had to do with some of it).

Now I just have to figure out how to loop multiple columns with class="sum"...

skepnaden
  • 143
  • 1
  • 1
  • 7
  • create a js fiddle and share with us. – Cerlin Jan 13 '15 at 08:49
  • Something like this: http://jsfiddle.net/d49c8jLL/ – skepnaden Jan 13 '15 at 09:33
  • May have noticed something that may or may not be relevant, but either way... Seem to have been loading the DataTables bootstrap js in the wrong order with JQuery. (According similar js error: http://stackoverflow.com/questions/26165263/datatables-uncaught-typeerror-cannot-read-property-defaults-of-undefined ) . I switched them and now the styling changed a bit to indicate progress, however still no sum value in the tfoot element at any column. – skepnaden Jan 13 '15 at 12:01

2 Answers2

16

Your table manipulation code needs to be executed only when DataTable is initialized, (see initComplete property).

Also make sure you have <tfoot></tfoot> block defined in your <table> otherwise there would be no footer.

Otherwise you were very close to the solution, please see below the corrected code:

var table = $('#ticketTable').DataTable({
    'initComplete': function (settings, json){
        this.api().columns('.sum').every(function(){
            var column = this;

            var sum = column
                .data()
                .reduce(function (a, b) { 
                   a = parseInt(a, 10);
                   if(isNaN(a)){ a = 0; }                   

                   b = parseInt(b, 10);
                   if(isNaN(b)){ b = 0; }

                   return a + b;
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
});

See this JSFiddle for an example.

UPDATE

There is also footerCallback property that lets you defined footer display callback function which will be called on every "draw" event.

The difference between initComplete and footerCallback is that initComplete is called once and footerCallback on every "draw" event.

If you're displaying the sum for the whole table, initComplete should suffice. Otherwise if you require to show in the footer data relevant for current page only (as in Footer callback example), use footerCallback instead.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • 'initComplete' ;) I was so close. Thanks for the answer! – skepnaden May 07 '15 at 12:39
  • Need to update. This solution does not work with blank columns. – Viktor Bogutskii Aug 15 '16 at 08:17
  • @Siteogra, see [this jsFiddle](http://jsfiddle.net/d49c8jLL/175/) for an example. – Gyrocode.com Aug 15 '16 at 12:25
  • @Gyrocode.com doesn't work for me, is it support all version datatables ! – Freddy Sidauruk Feb 26 '17 at 05:46
  • @FreddySidauruk, no, only 1.10 and newer. – Gyrocode.com Feb 26 '17 at 05:49
  • @Gyrocode.com i use datatables server side stole tutorial from here http://www.ahmed-samy.com/php-codeigniter-full-featrued-jquery-datatables-part-1/ already googling nothing works – Freddy Sidauruk Feb 26 '17 at 05:53
  • @FreddySidauruk, the tutorial uses 1.9 but newer 1.10 has backward support for 1.9 option names so you can use the newest version with no problem. If you have a question I recommend starting a new one on StackOverflow instead of using comments to existing question. – Gyrocode.com Feb 26 '17 at 06:00
  • @Gyrocode.com i did change all resource with cdn but doesn't work, am i wrong to comment to question which already solved ? – Freddy Sidauruk Feb 26 '17 at 06:06
  • What about use the sum footer with reording columns?? When you use $( api.column( 0 ).footer() ).html('= '+sum); you are written on a determinate index column. But if you make a reorder column, the column index will not match with te aim column.... – Angel Jul 10 '17 at 10:30
  • @Angel, column index doesn't change even after reordering. – Gyrocode.com Jul 10 '17 at 12:15
  • @Gyrocode.com, not in my case. When I apply the change footer in the footerCallback, my index column changes -- suma = api.column( 0, { filter: 'applied'} ).data().reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); $( api.column( 0 ).footer() ).html('= '+suma); -- The index 0 is not the original 0 index :( It could be a configuration error in the configuration? – Angel Jul 12 '17 at 07:04
  • @Gyrocode.com, have you been able to discover the index error? See the problem is the filter applied when changes! – Angel Jul 17 '17 at 06:56
2

Mix. Empty replaced to 0 

"initComplete": function (settings, json) {
        this.api().columns('.sum').every(function () {
            var column = this;

            var intVal = function (i) {
                return typeof i === 'string' ?
                i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var sum = column
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
Viktor Bogutskii
  • 870
  • 1
  • 14
  • 22