jQueryを使用して生成されたデータテーブルの最後の行にある列の合計を表示する方法は？

Question

jQueryを使用してデータテーブルを作成しました。テーブルには5つの列があり、1つの列には支払額が表示されます。支払額の欄には、すべての値の合計を表示する必要があります。どうやってやるの？

以下

が私のHTMLコードです：

以下

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

は私のjqueryのコードです：だから

$('#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 

、私はの底に「支払い列」のすべての値の合計を印刷する必要があります"支払い欄"。このような何か：

助けてください？

Answer 1

すべてのページのデータを合計する方法の例については、Footer callbackをご覧ください。

は、例えば、3列目の合計を算出する（ゼロベースの列インデックスは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); 
    } 
});