Base BootStrap DataTable Sum Duration

by Dominic Myers

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<div class="container">
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Something</th>
                <th>Duration</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Something</th>
                <th>Duration</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>00:00:01</td>
            </tr>
            <tr>
                <td>2</td>
                <td>00:00:01</td>
            </tr>
            <tr>
                <td>3</td>
                <td>00:00:01</td>
            </tr>
            <tr>
                <td>4</td>
                <td>00:03:01</td>
            </tr>
            <tr>
                <td>5</td>
                <td>01:01:01</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

$(function(){
    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)'
        	);
		}   
    });
});