Datatable显示所有行的总和，而不是当前显示的行

我已经创建了具有7列的jQuery的数据表。但它有约。 24行。最初，将显示前八行。表格末尾有“显示更多”链接。如果用户点击该链接，则会显示另外8行。 datatable的第六列有“到期金额”值，其中有“总到期类”类。我试图显示页面底部第六列当前显示的行的总和。例如，最初会显示八行，因此只显示八行的总和。当用户点击“显示更多”链接时，将显示另外8行，因此将显示16行的总和。我编写了代码，但它总是显示所有24行的总和，而不是当前显示的行。下面是HTML代码数据表：Datatable显示所有行的总和，而不是当前显示的行

<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代码：

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

对此有何建议？下面是内部generateTable对jQuery的数据表代码（）

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

}

来源

2016-07-19 Teddu

上有数据表的网站，不正是你想要的一个例子。

瞧瞧吧Footer callback example

它将计算当前显示的所有列和列的总和。您也可以自由修改显示内容和显示方式。

编辑：

添加以下部分表的生成过程：

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

给我下图所示的结果，这应该是你想要的：

来源

2016-07-19 08:53:35 DKSan

我尝试过Footer回调..但它显示所有行的总和 – Teddu

您是否修改了示例的第32行（''''+ pageTotal +'（$'+ total +'total）''）到''''+ pageTotal'？ – DKSan

是的..没有工作 – Teddu

Despide你的代码似乎缺少某些部分，你可以改变你的JS代码到这一点：

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

哪些应该只匹配行在目前看来。

Check fiddle

来源

2016-07-19 08:48:56 Yuri

这没有工作！ – Teddu

你说得对，对不起。编辑代码 – Yuri

Datatable显示所有行的总和，而不是当前显示的行

回答

相关问题