首页 > 解决方案 > Javascript Footer Callback Sum Values in one column for each unique combine value in a 2 other columns

问题描述

我有一份不同日期的公司股息支付报告,其中重复了每次支付的股份价值。

每个独特的 Portfolio.Symbol 可能有多个付款,但每次付款只会重复一个值。

我需要对每个独特的 Portfolio.Symbol 组合的值列中的值求和。

Date        Portfolio  Symbol   Value  Payment.   Sum Value
2020-11-27  DEA        GSK      26000  30.        26000
2020-11-30  ISA        GSK      44000  30.        44000
2021-06-30  ISA        GSK      44000  30.        0, repeat of ISA.GSK so ignore
2021-06-30  DEA        GSK      26000  30.        0, repeat of DEA.GSK so ignore

Unique Sum                      70000   
So in the above example Sum of Value should be Sum of last column 
26000+44000=70000

我已经建立了一个jsfiddle

https://jsfiddle.net/cpshart/s478gvcj/53/

作为使用 datatables.net 页脚回调的起点

如果有人可以帮助我获得解决方案,将不胜感激。

非常感谢

科林

标签: javascriptdatatables

解决方案


在您在 jsfiddle 中提供的代码中,您似乎没有添加仅添加唯一数据的条件。然后作为解决方案,您可以尝试使用以下代码:

$(document).ready(function() {
  $('#example').DataTable({
    "footerCallback": function(row, data, start) {
      var api = this.api();

      var intVal = function(i) {
        return typeof i === 'string' ?
          i.replace(/[\$,]/g, '') * 1 :
          typeof i === 'number' ?
          i : 0;
      };

      var indexOfPortofolio = 1;
      var indexOfSymbol = 2;
      var indexOfValue = 3;

      // Total over all pages
      var total = api
        .rows()
        .data()
        .toArray()
        .reduce(function(a, v, i) {
          var uniquePortofolioSymbol = v[indexOfPortofolio] + v[indexOfSymbol];
          if (a.uniqueList.indexOf(uniquePortofolioSymbol) === -1) {
            a.sum += intVal(v[indexOfValue]);
            a.uniqueList.push(uniquePortofolioSymbol);
            a.uniqueIndex.push(i);
          }
          return a;
        }, { sum: 0, uniqueList: [], uniqueIndex: [] });

      // Total over this page
      var pageTotal = api
        .rows({ page: 'current' })
        .data()
        .toArray()
        .reduce(function(a, v, i) {
          var uniquePortofolioSymbol = v[indexOfPortofolio] + v[indexOfSymbol];
          if (
            a.uniqueList.indexOf(uniquePortofolioSymbol) === -1
            && total.uniqueIndex.indexOf(start + i) !== -1
          ) {
            a.sum += intVal(v[indexOfValue]);
            a.uniqueList.push(uniquePortofolioSymbol);
          }
          return a;
        }, { sum: 0, uniqueList: [] });

      // Update footer
      $(api.column(3).footer()).html(
        pageTotal.sum + ' ( ' + total.sum + ' )'
      );
    }
  });
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>Portfolio</th>
      <th>Symbol</th>
      <th>Value</th>
      <th>Payment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-11-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2021-06-30</td>
      <td>ISA</td>
      <td>GSK</td>
      <td>44000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2020-11-30</td>
      <td>ISA</td>
      <td>GSK</td>
      <td>44000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2020-11-27</td>
      <td>DEA</td>
      <td>GSK</td>
      <td>26000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2021-02-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>50</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>54</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>57</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>DEA</td>
      <td>RLSEB</td>
      <td>20000</td>
      <td>27</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>DEA</td>
      <td>RLSEB</td>
      <td>20000</td>
      <td>27</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>31</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>DEA</td>
      <td>RLSEB</td>
      <td>20000</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" style="text-align:right">Total:</th>
      <th></th>
    </tr>
  </tfoot>
</table>


推荐阅读