jQuery Datatables Footer sum of a hh:mm:ss data type column

Question

I can get the footer total of a INT column like this:

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

        // Total over all pages
        total_quantita = quantita
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

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

        // Update footer Column "quantita"
        $( quantita.column( 5 ).footer() ).html(
        pageTotal_quantita +' ('+ total_quantita +' total)'
        );

My question is: How can i get the total of a hh:mm:ss data type column like above? Thank you!

In much the same way, perhaps using [MomentJS](http://momentjs.com/docs/#/durations/) 's durations — annoyingmouse, May 24 '16 at 14:49

score 1 · Accepted Answer · answered May 25 '16 at 12:07

I've updated your code, you were nearly there but moment was used to create this:

var table = $('#example').DataTable({
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;
        // Total over all pages
        total_ID = api.column(0).data().reduce( function (a, b) {
            return ~~a + ~~b;
        }, 0 );
        total_Duration = api.column(1).data().reduce( function (a, b) {
            return moment.duration(a).asMilliseconds() + moment.duration(b).asMilliseconds();
        }, 0 );
        // Total over this page
        pageTotal_ID = api.column(0, { page: 'current'} ).data().reduce( function (a, b) {
            return ~~a + ~~b;
        }, 0 );
        pageTotal_Duration = api.column(1, { page: 'current'} ).data().reduce( function (a, b) {
            return moment.duration(a).asMilliseconds() + moment.duration(b).asMilliseconds();
        }, 0 );
        // Update footer Column "quantita"
        $( api.column(0).footer()).html(
            pageTotal_ID + ' ('+ total_ID +' total)'
        );
        $( api.column(1).footer()).html(
            moment.utc(pageTotal_Duration).format("HH:mm:ss") + ' ('+ moment.utc(total_Duration).format("HH:mm:ss") + ' total)'
        );
    }   
});

It seems to work with the limited example I created. Hope that helps.

You're welcome, do please be aware that the `format` function might need tweaking for large durations as I'm [spoofing](http://stackoverflow.com/questions/13262621/how-do-i-use-format-on-a-moment-js-duration) moment into thinking it's a date. Have a look around and I'm sure you'll find another way of formatting your duration properly. — annoyingmouse, May 25 '16 at 12:27
Indeed, there is a problem with the hours. If hour > 24 then hour = 1. Big problem :( — Cristian Muscalu, May 25 '16 at 13:14

score 0 · Answer 2 · answered May 25 '16 at 09:48

Trying to find a solution... first thing i have to do is sum() column data (https://cdn.datatables.net/plug-ins/1.10.11/api/sum%28%29.js)

        var time_api = this.api();
        //total for all pages
        var total = time_api.column(3)
                .data()
                .sum();           

        //write in footer
        $(time_api.column(3)
            .footer())
            .html(total);

This gives me this output which is a sum, but it needs some tweaks, and i can't figure out how to turn this:

Into this: 12:03:05 (the correct sum output).

I will probably have to create a new question for this, and if it get's an answer i'll update here.

Please help.

jQuery Datatables Footer sum of a hh:mm:ss data type column

2 Answers2