DataTables.net Tabellenspalte Summe in Fußzeile

Question

Ich habe Probleme mit einem winzigen Detail beim Einfügen der Summenwert jeder Spalte mit der Klasse "Summe" in die Fußzeile.

Der Code (mehr oder weniger direkt aus DataTables.net genommen) geht:

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

"Summe" hat den richtigen Wert, ist aber irgendwie nicht in die Fußzeile eingefügt! I.e. Sein Element erscheint leer.

Beachten Sie, dass das Snippet unten funktioniert, aber ich möchte jede Spalte mit Klassensumme zusammenfassen.

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 - Problemumgehung:

Ich habe den Code an die Stelle der DataTable verschoben und ging stattdessen mit footerCallback. Im folgenden sehen Sie den Code ein:

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

Irgendwie jetzt der Wert in das rechte tfoot Element eingesetzt ist. Immer noch keine Ahnung, warum es überhaupt nicht funktionieren würde (aber wie in der Kommentarreihenfolge erwähnt wurde, hätte JS-Dateien auch etwas damit zu tun haben können).

Jetzt muß ich nur, um herauszufinden, wie mehrere Spalten in einer Schleife mit class = „sum“ ...

Answer 1

Ihre Tabelle Manipulation Code muss nur ausgeführt werden, wenn Datatable initialisiert wird, (siehe initComplete Eigenschaft).

Auch sicherstellen, dass Sie <tfoot></tfoot> Block in Ihrem <table> definiert haben, sonst würde es keine Fußzeile geben.

Ansonsten waren Sie sehr nah an der Lösung finden Sie unter dem korrigierten Code:

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

this JSFiddle für ein Beispiel.

UPDATE

Es gibt auch footerCallback Eigenschaft, die Sie Fußzeile Anzeige Callback-Funktion lässt definiert, die auf jedem „zeichnen“ Ereignis aufgerufen wird.

Der Unterschied zwischen initComplete und footerCallback ist, dass initComplete einmal und footerCallback auf jedem „zeichnen“ Ereignis aufgerufen. Wenn Sie die Summe für die gesamte Tabelle anzeigen, sollte initComplete ausreichen. Andernfalls müssen Sie stattdessen nur die für die aktuelle Seite relevanten Footer-Daten anzeigen (z. B. Footer callback example). Verwenden Sie stattdessen footerCallback.

Answer 2

Mischen. Leere ersetzt 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); 
     }); 
    }