CODEWITHSUNDEEP
javascriptjquerydatatables
Cristian Muscalu
Cristian Muscalu

Reputation: 9905

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

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)'
        );

enter image description here

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

Upvotes: 0

Views: 2129

Answers (2)

annoyingmouse
annoyingmouse

Reputation: 5689

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.

Upvotes: 1

Cristian Muscalu
Cristian Muscalu

Reputation: 9905

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:

enter image description here

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.

Upvotes: 0

Related Questions