Datatableは現在表示されている行ではなく、すべての行の合計を表示しています

Question

7つの列を持つjQueryでデータテーブルを作成しました。しかし、それは約です。 24行。最初は、最初の8行が表示されます。表の最後に「もっと見る」リンクがあります。ユーザーがそのリンクをクリックすると、さらに8行が表示されます。 データテーブルの6番目の列には、「合計金額」のクラスがあり、「合計金額」の値を持ちます。現在表示されている6行目の行の合計をページの下部に表示しようとしています。たとえば、最初は8行が表示されるため、8行の合計が表示されます。ユーザーが「もっと見る」リンクをクリックすると、さらに8つの行が表示されるので、16行の合計が表示されます。 私はコードを書いたが、現在表示されている行ではなく常に24行の合計を表示する。 は以下のDataTableのためのHTMLコードです：

$(document).ready(function() { 
    generateTable(); 
    var sum = 0.00; 
    $(this).find(".total-due-class").each(function(){ 
    var temp = $(".total-due-class").html(); 
    sum += parseFloat(temp.substring(1)); 
    }); 
    $("#total-due-footer").html("$"+sum); 
}); 

この上の任意の提案：

以下

<table id="multiple-account-table" cellpadding="0" cellspacing="0" class="wide100"> 
      <thead> 
      <tr> 
       <th><input type="checkbox" id="select-all-statement" value="" /></th> 
           <th id="acc-num">Account Number</th> 
           <th id="acc-name">Account Name</th> 
           <th id="alias-name">Alias</th> 
           <th id="dueDate-column">Due Date</th> 
           <th id="totalDue-column" >Total Due</th> 
           <th id="payment-column" class="black white-active-bg pad-bottom-0-5">Payment Amount</th> 
       </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th>Total</th> 
       <th id="total-due-footer"></th> 
       <th id="payment-footer"></th> 
     </tr> 
     </tfoot> 
</table> 

はjavascriptのコードですか？以下 は、いくつかの部分が欠けているように見える、あなたがこれまであなたのJSコードを変更することができます）（あなたのコードDespide

function generateTable(){ 
var index = -1; 
    $('#multiple-account-table').dataTable({ 
     "data": [ 
      {"accountNumber":"034-202553701","name":"Account 1","alias":"dummy1","dueDate":"10/19/2016","statementBalance":"34.60"}, 
      {"accountNumber":"678-202553702","name":"Account 2","alias":"dummy 2","dueDate":"10/19/2015","statementBalance":"14.50"}, 
      {"accountNumber":"989-202553703","name":"Account 3","alias":"Atlanta 3","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553704","name":"Account 4","alias":"dummy4","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553705","name":"Account 5","alias":"Atlanta 5","dueDate":"09/19/2016","statementBalance":"100.50"}, 
      {"accountNumber":"131-202553706","name":"Account 6","alias":"Atlanta 6","dueDate":"12/19/2017","statementBalance":"18.50"}, 
      {"accountNumber":"131-202553707","name":"Account 7","alias":"Atlanta 7","dueDate":"01/01/2015","statementBalance":"105.50"}, 
      {"accountNumber":"131-202553708","name":"Account 8","alias":"Atlanta 8","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553709","name":"Account 9","alias":"Atlanta 9","dueDate":"10/07/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553710","name":"Account 10","alias":"Atlanta 10","dueDate":"10/19/2016","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553711","name":"Account 11","alias":"Atlanta 11","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553712","name":"Account 12","alias":"Atlanta 12","dueDate":"04/04/2016","statementBalance":"115.50"}, 
      {"accountNumber":"131-202553713","name":"Account 13","alias":"Atlanta 13","dueDate":"05/19/2015","statementBalance":"25.50"}, 
      {"accountNumber":"131-202553714","name":"Account 14","alias":"Atlanta 14","dueDate":"03/19/2015","statementBalance":"135.50"}, 
      {"accountNumber":"131-202553715","name":"Account 15","alias":"Atlanta 15","dueDate":"10/19/2017","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553716","name":"Account 16","alias":"Atlanta 16","dueDate":"10/19/2015","statementBalance":"08.50"}, 
      {"accountNumber":"131-202553717","name":"Account 17","alias":"Atlanta 17","dueDate":"10/08/2015","statementBalance":"10.50"}, 
      {"accountNumber":"131-202553718","name":"Account 18","alias":"Atlanta 18","dueDate":"09/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553719","name":"Account 19","alias":"Atlanta 19","dueDate":"10/05/2015","statementBalance":"15.80"}, 
      {"accountNumber":"131-202553720","name":"Account 20","alias":"Atlanta 20","dueDate":"10/19/2015","statementBalance":"39.50"}, 
      {"accountNumber":"131-202553721","name":"Account 21","alias":"Atlanta 21","dueDate":"10/21/2015","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553722","name":"Account 22","alias":"Atlanta 22","dueDate":"10/19/2016","statementBalance":"15.50"}, 
      {"accountNumber":"131-202553723","name":"Account 23","alias":"Atlanta 23","dueDate":"10/19/2015","statementBalance":"32.50"}, 
      {"accountNumber":"131-202553724","name":"Account 24","alias":"Atlanta 24","dueDate":"12/29/2016","statementBalance":"105.50"} 
      ], 
     "dom": 'it', 
     "pageLength": 8, 
     "language": { 
      "info": "Viewing accounts 1 - _END_ of _TOTAL_ ", 
      "emptyTable": "No records are available", 
     }, 
     "columns": [ 
      {"data": null}, 
      {"data": "accountNumber"}, 
      {"data": "name"}, 
      {"data": "alias"}, 
      {"data": "dueDate"}, 
      {"data": "statementBalance"}, 
      {"data": null} 

     ], 
     "columnDefs": [ 
      {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4,5,6]}, 
      { 
      '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"/>'; 
       } 
      }, 
      { 
       'targets': 1, 
       'render': function(data, type, full, meta) { 
         return '<span id="pdf" class="stmt-identifier">'+data+'</span>'; 
       } 
      }, 
      { 
       'targets': 4, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
       $(nTd).text(sData); 
      } 
      }, 
      { 
       'targets': 5, 
       'orderable': false, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
        $(nTd).html('<span class="total-due-class">$'+sData+'</span>'); 
       } 
      }, 
      { 
       'targets': 6, 
       'searchable':false, 
       'orderable':false, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
        $(nTd).html('<span class="dollar-font">$<input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" /></span>'); 

       } 
      } 
      ], 
     "aaSorting": [[4, 'asc'], [5,'desc'], [1,'asc'] ] 

    }); //End of datatable function 
    $('#multiple-account-table_wrapper').append('<span id="md-table-load-more" style="display: none;" class="see-more text-center pad-1 link-enabled bold">Show More</span>'); 
    updateShowMoreLink(); 

} 

Answer 1

正確に何をしたいんDataTableのサイト上の例があります。

は、それはすべての列と現在表示されている列の合計を計算しますFooter callback example

でそれをチェックアウト。あなたは何がどのように表示されるかを自由に変更することができます。

EDIT：

テーブルの生成処理に次の部分を追加する：

"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(5, {page: 'current'}) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }, 0); 

    // Update footer 
    $(api.column(5).footer()).html('$' + pageTotal); 
} 

文書準備ハンドラ

var sum = 0.00; 
$(this).find(".total-due-class").each(function(){ 
    var temp = $(".total-due-class").html(); 
    sum += parseFloat(temp.substring(1)); 
}); 
$("#total-due-footer").html("$"+sum); 

から次の部分を除去することは私に、以下に示す結果が得られますあなたが望むはずのもの：

Answer 2

generateTable内部jqueryの、DataTableのためのコードです：

行のみが一致している必要があり

$('#multiple-account-table tbody').find(".total-due-class").each(function(index, item){ 
    var temp = $(item).text(); 
    sum += parseFloat(temp.substring(1)); 
}); 

現在のビューで

Check fiddle