DataTables

by Luís Alves

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<div>
    <table class="table table-striped table-bordered table-hover" id="myTable">
        <div><h2>Mapa Analítica</h2></div>
        <thead>
            <tr>
                <th class="text-center" style="vertical-align:middle;">Name</th>
                <th class="text-center">Tipo Documento</th>
                <th class="text-center">Número</th>
                <th class="text-center">Cliente</th>
                <th class="text-center">Obra</th>
                <th class="text-center">Designação</th>
                <th class="text-center">Agregado</th>
                <th class="text-center sum">Quantidade (ton)</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>

        <tbody>
          <tr>
            <td class="text-center">2016-10-21</td>
            <td class="text-center">GT</td>
            <td class="text-center">2345</td>
            <td class="text-center">Artur ?></td>
            <td class="text-center">32</td>
            <td class="text-center">publica</td>
            <td class="text-center">brita</td>
            <td class="text-center">30</td>
          </tr>
          <tr>
            <td class="text-center">2016-10-21</td>
            <td class="text-center">GT</td>
            <td class="text-center">2345</td>
            <td class="text-center">Artur ?></td>
            <td class="text-center">32</td>
            <td class="text-center">publica</td>
            <td class="text-center">brita</td>
            <td class="text-center">30</td>
          </tr>
          <tr>
            <td...

JavaScript

$(document).ready(function() {
    $('#myTable').DataTable( {
        "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 all pages
            total = api
                .column( '.sum' )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 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 +' ( $'+ total +' total)'
            );
        }
    } );
} );