如何显示使用jQuery生成的数据表的最后一行中的列总数?

时间:2016-07-11 12:00:27

标签: jquery jquery-ui datatable datatables

我使用jQuery创建了一个数据表。该表有五列,其中一列是付款金额。我必须在付款金额列底部的付款列中显示所有值的总和。我怎么能这样做?

以下是我的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 

所以,我需要打印&#34; payment-column&#34;的所有值的总和。在&#34;付款栏&#34;的底部。像这样:

enter image description here

请帮帮忙?

1 个答案:

答案 0 :(得分:2)

请参阅Footer callback示例,了解如何在所有网页上汇总数据。

例如,要计算第三列的总数(从零开始的列索引为@IBOutlet weak var btListOrdo: UIButton! ):

2