Sommare le colonne in jQuery DataTables

jQuery DataTables è uno dei plugin jQuery più apprezzati in circolazione.

Le motivazioni del suo successo sono tante, e tra queste ci stanno sicuramente la sua flessibilità e possibilità di configurazione.

Oggi vediamo come sommare il valore di una colonna, mettendo il risultato nel footer.

Vedremo due esempi:

• in uno il valore cambia al cambiare dei filtri impostati
• nell'altro il valore rimane fisso

Questo il primo esempio:

function dtSumQtaImpN(id, colOrder, typeOrder, arrCols) {
    $(id).dataTable({
        responsive: true,
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(), data;
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };
            for (var i = 0; i < arrCols.length; i++) {
                total = api.column(arrCols[i]).data().reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });
                $(api.column(arrCols[i]).footer()).html(total);
            }
        },
        "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
        "aaSorting": [[colOrder, typeOrder]]
    });
}

La funzione richiede 4 parametri:

• l'id o la classe della tabella da inizializzare
• la colonna da ordinare di default
• il tipo di ordine (ascendente o discendente)
• un array con le colonne da sommare

In pratica usiamo la funzione di callback footerCallback; in questa funzione andiamo a ciclare sull'array che rappresenta le colonne da sommare, e andiamo a sommare i valori.

Poi, alla fine del cliclo, prendiamo il riferimento del footer e ci scriviamo dentro il corrispettivo valore.

In questo caso il valore della somma rimane fisso, e non cambia al variare dei dati cercati nella tabella.

Questo, invece, il secondo esempio:

function dtSumQtaImpCurrentN(id, colOrder, typeOrder, arrCols) {
    $(id).dataTable({
        responsive: true,
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(), data;
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };
            for (var i = 0; i < arrCols.length; i++) {
                total = api.column(arrCols[i], {search: 'applied'}).data().reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });
                $(api.column(arrCols[i]).footer()).html(total);
            }
        },
        "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
        "aaSorting": [[colOrder, typeOrder]]
    });
}

La differenza è praticamente solo nell'uso dell'opzione search: 'applied'; questa opzione fa si che il valore venga ricalcolato prendendo solo quelli attivi nel filtro impostato nella tabella.

Per il resto non ci sono differenze; si potrebbero anche unire le due funzioni in una unica, ma così potete vedere meglio la differenza.

A questo punto per richiamare le due funzioni:

    $(document).ready(function () {
        var arrayCols = [1, 2];
        dtSumQtaImpN('.tbl_classic', 4, 'asc', arrayCols);
        dtSumQtaImpCurrentN('.tbl_classic', 4, 'asc', arrayCols);
    });

Il conteggio delle colonne parte da zero; quindi la prima colonna sarò la zero, e poi le altre a seguire.

Enjoy!