Wie wird die Gesamtsumme einer Spalte in der letzten Zeile einer mit jQuery generierten Datentabelle angezeigt?

Question

Ich habe eine Datentabelle mit jQuery erstellt. Die Tabelle hat fünf Spalten, darunter eine Spalte für den Zahlungsbetrag. Ich muss die Summe aller Werte in der Zahlungsspalte am unteren Rand der Zahlungsbetragsspalte anzeigen. Wie kann ich das machen?

unter meinem HTML-Code ist:

<table id="statement-table" cellpadding="0" cellspacing="0" border="0" class="wide100"> 
        <thead> 
         <tr> 
          <th class="black white-active-bg pad-bottom-0-5 cursor-auto"> 
          <input type="checkbox" id="select-all-statement" value="" /> 
          </th> 
          <th id="stmt-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Statement</th> 
          <th id="dueDate-column"class="black white-active-bg pad-bottom-0-5 cursor-auto">Due Date</th> 
          <th id="totalDue-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Total Due</th> 
          <th id="payment-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Payment Amount</th> 
         </tr> 
         </thead> 
       </table> 

Unten ist mein jQuery-Code:

$('#statement-table').dataTable({ 
     "data": json, 
     "dom": 't', 
     "info": false, 
     "pageLength": 8, 
     "columns": [ 
      {"data":""}, 
      {"data": "statementCode"}, 
      {"data": "dueDate"}, 
      {"data": "statementBalance"}, 
      {"data": "statementBalance"} 

     ], 
     "columnDefs": [ 
      {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4]}, 
      { 
       'targets': 0, 
       'orderable': false, 
        'render': function(data, type, full, meta) { 
         ++index; 
          return '<input type="checkbox" id="select-checkbox'+index+'" name="payment-checkbox" class="multi-checkbox"/><label for="select-checkbox"></label>'; 
        } 
      }, 
      { 
       'targets': 1, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
        $(nTd).html('<span id="pdf" class="stmt-identifier">'+sData+'</span>'); 
       } 
      }, 
      { 
       'targets': 2, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
       $(nTd).text(date); 
       } 
      }, 
      { 
       'targets': 3, 
       'render': function (data, type, full, meta){ 
        return '$'+ data; 
       } 
       }, 
       { 
       'targets': 4, 
       'searchable':false, 
       'orderable':false, 
       'render': function (data, type, full, meta){ 
        return '<span class="dollar-font">$</span>'+ 
        '<input type="number" id="payement-textbox'+index+'" name="payment-textbox" min="0" max="100000" step="any" maxlength="9" class="payment" placeholder="--" value=""/>'; 
       } 
       } 

     ], 
     "aaSorting": [[2, 'desc']], 

    }); //End of datatable function 

Also, ich brauche Summe aller Werte von "payment-Säule" im Boden drucken von "Zahlungsspalte" Etwas wie folgt aus:

Bitte helfen?

Answer 1

Siehe Beispiel Footer callback Beispiel zum Summieren von Daten auf allen Seiten.

Zum Beispiel insgesamt für dritte Spalte zu berechnen (nullbasierte Spaltenindex ist 2):

$('#example').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(2) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }, 0); 

     // Update footer 
     $(api.column(2).footer()).html('$' + total); 
    } 
});