web-dev-qa-db-fra.com

Somme des colonnes du tableau DataTables.net dans le pied de page

J'ai des problèmes avec un petit détail dans l'insertion de la valeur de somme de chaque colonne, avec la classe "somme", dans son pied de page.

Le code (plus ou moins tiré directement de DataTables.net) va:

var table = $('#example').DataTable();
        table.columns('.sum').each(function (el) {
            var sum = table
                .column(el)
                .data()
                .reduce(function (a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });
            $(el).html('Sum: ' + sum);
        });

"sum" a la valeur correcte mais n'est en quelque sorte pas inséré dans le pied de page! C'est à dire. son élément apparaît vide.

Notez que l'extrait ci-dessous fonctionne correctement, mais je veux additionner chaque colonne avec la somme de classe.

var table = $('#example').DataTable();
var column = table.column(4);

$(column.footer()).html(
    column.data().reduce(function (a, b) {
        return parseInt(a, 10) + parseInt(b, 10);
    })
);

//////////////////////////////////////////////////// ////////////////////////////////////

EDIT - Solution:

J'ai déplacé le code à l'endroit où le DataTable est initialisé et suis allé avec footerCallback à la place. Voir ci-dessous le code:

"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 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);
                }

D'une certaine manière, la valeur est maintenant insérée dans l'élément droit tfoot. Toujours aucune idée pourquoi cela ne fonctionnerait pas en premier lieu (mais comme mentionné dans l'ordre des commentaires, l'inclusion de fichiers JS aurait pu avoir à voir avec certains d'entre eux).

Maintenant, je dois juste comprendre comment boucler plusieurs colonnes avec class = "sum" ...

javascriptjquerydatatablesjquery-datatables
11
skepnaden

Votre code de manipulation de table doit être exécuté uniquement lorsque DataTable est initialisé, (voir la propriété initComplete ).

Assurez-vous également que vous disposez de <tfoot></tfoot> bloc défini dans votre <table> sinon il n'y aurait pas de pied de page.

Sinon, vous étiez très proche de la solution, veuillez voir ci-dessous le code corrigé:

var table = $('#ticketTable').DataTable({
    'initComplete': function (settings, json){
        this.api().columns('.sum').every(function(){
            var column = this;

            var sum = column
                .data()
                .reduce(function (a, b) { 
                   a = parseInt(a, 10);
                   if(isNaN(a)){ a = 0; }                   

                   b = parseInt(b, 10);
                   if(isNaN(b)){ b = 0; }

                   return a + b;
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
});

Voir ce JSFiddle pour un exemple.

[~ # ~] mise à jour [~ # ~]

Il y a aussi la propriété footerCallback qui vous permet de définir la fonction de rappel d'affichage du pied de page qui sera appelée à chaque événement "draw".

La différence entre initComplete et footerCallback est que initComplete est appelé une fois et footerCallback à chaque événement "draw".

Si vous affichez la somme pour la table entière, initComplete devrait suffire. Sinon, si vous devez afficher dans le pied de page les données pertinentes pour la page actuelle uniquement (comme dans exemple de rappel de pied de page ), utilisez plutôt footerCallback.

8
Gyrocode.com

Mélanger. Vide remplacé à 0

"initComplete": function (settings, json) {
        this.api().columns('.sum').every(function () {
            var column = this;

            var intVal = function (i) {
                return typeof i === 'string' ?
                i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var sum = column
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
2
Viktor Bogutskii