DataTables - 如何获取html表中列的百分比答案

【问题标题】：DataTables - how to get the percentage of a column in html tableDataTables - 如何获取html表中列的百分比
【发布时间】：2021-04-18 00:27:08
【问题描述】：

我在计算获取数据表的 html 表中的列的百分比时遇到了困难。

在上表中，我已经弄清楚了如何获取每列的总和，但是对于“D 列”总计，我需要获取百分比，即“（B 列总计/C 列总计） * 100. F 列也将是（E 列的总和/A 列的总和），而不是现在显示的总和。

D 列的总数为空白，因为我使用的 javascript 代码无法汇总 D 列，因为我使用的是百分号。因此，使用我当前的代码，我想对 A、B、C、E、G 列和 D 列的百分比求和，F 列将是 E 列除以 A 列。

如何使用 Datatables 和 javascript 计算这些总数？任何帮助将不胜感激。谢谢。

$(document).ready(function() {
    // DataTable initialisation
    $('table.off-table1').DataTable({

            "searching": false,
            "info": false,
            "paging": false,
            "autoWidth": true,
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api();
                nb_cols = api.columns().nodes().length;
                var j = 1;
                while(j < nb_cols){
                    var pageTotal = api
                .column( j, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return Number(a) + Number(b);
                }, 0 );
          // Update footer
          $( api.column( j ).footer() ).html(pageTotal);
                    j++;
                }
            }
        
        });
});

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/fc-3.3.1/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sp-1.1.1/sl-1.3.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/fc-3.3.1/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>


<style>

</style>

</head>



<table id="def-table1" class="def-table1" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">A</th>
                                    <th scope="col">B</th>
                                    <th scope="col">C</th>
                                    <th scope="col">D%</th>
                                    <th scope="col">E</th>
                                    <th scope="col">F</th>
                                    <th scope="col">G</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td>Totals</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td class="minutes">41</td>
                                    <td class="minutes">14</td>
                                    <td class="minutes">33</td>
                                    <td class="minutes">42.4 %</td>
                                    <td class="minutes">42</td>
                                    <td class="minutes">1.02</td>
                                    <td class="minutes">8</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td class="minutes">8</td>
                                    <td class="minutes">2</td>
                                    <td class="minutes">6</td>
                                    <td class="minutes">33.3 %</td>
                                    <td class="minutes">5</td>
                                    <td class="minutes">0.63</td>
                                    <td class="minutes">1</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td class="minutes">29</td>
                                    <td class="minutes">11</td>
                                    <td class="minutes">25</td>
                                    <td class="minutes">44.0 %</td>
                                    <td class="minutes">33</td>
                                    <td class="minutes">1.14</td>
                                    <td class="minutes">5</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td class="minutes">7</td>
                                    <td class="minutes">1</td>
                                    <td class="minutes">5</td>
                                    <td class="minutes">20.0 %</td>
                                    <td class="minutes">5</td>
                                    <td class="minutes">0.71</td>
                                    <td class="minutes">1</td>
                                </tr>
                            </tbody>
                            </table>

【问题讨论】：

标签： html jquery datatables

【解决方案1】：

我通过不使用this.api() 并且只使用传递给回调的参数和一些基本的数组方法来简化这一点。现在应该更容易使用了

function tfootTotals(tfRow, data, start, end, display) {
    // display is array of data indices that are included in this view
    const pageData = data.filter((arr, i) => display.includes(i));
    // create array of column totals
    const totals = Array.from(pageData[0]).fill(0);
    pageData.forEach(arr => arr.forEach((e, i) => totals[i] += (+e) || 0));

    // calculate the special ones
    totals[4] = (100 * totals[2] / totals[3]).toFixed(1) + '%';
    totals[6] = totals[5] / totals[1];

    // set the tfoot cell text. slice ignores first one 
    // so indexing is one less than totals array
    $(tfRow.cells).slice(1).text(i => totals[i+1])
    // console.log(totals)
}
  
  
  // DataTable initialisation
  $('#def-table1').DataTable({
    "searching": false,
    "info": false,
    "paging": false,
    "autoWidth": true,
    "footerCallback": tfootTotals
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

  <table id="def-table1" class="def-table1" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">A</th>
      <th scope="col">B</th>
      <th scope="col">C</th>
      <th scope="col" class="col-d">D%</th>
      <th scope="col">E</th>
      <th scope="col" class="col-f">F</th>
      <th scope="col">G</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Totals</td>
      <td></td>
      <td></td>
      <td></td>
      <td>ff</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td class="minutes">41</td>
      <td class="minutes">14</td>
      <td class="minutes">33</td>
      <td class="minutes">42.4 %</td>
      <td class="minutes">42</td>
      <td class="minutes">1.02</td>
      <td class="minutes">8</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="minutes">8</td>
      <td class="minutes">2</td>
      <td class="minutes">6</td>
      <td class="minutes">33.3 %</td>
      <td class="minutes">5</td>
      <td class="minutes">0.63</td>
      <td class="minutes">1</td>
    </tr>
    <tr>
      <td>3</td>
      <td class="minutes">29</td>
      <td class="minutes">11</td>
      <td class="minutes">25</td>
      <td class="minutes">44.0 %</td>
      <td class="minutes">33</td>
      <td class="minutes">1.14</td>
      <td class="minutes">5</td>
    </tr>
    <tr>
      <td>4</td>
      <td class="minutes">7</td>
      <td class="minutes">1</td>
      <td class="minutes">5</td>
      <td class="minutes">20.0 %</td>
      <td class="minutes">5</td>
      <td class="minutes">0.71</td>
      <td class="minutes">1</td>
    </tr>
  </tbody>
</table>

【讨论】：

哇，非常感谢。这正是我想要做的，而且更干净。非常感谢您的帮助。
在摆弄了几年未使用的api 之后，我花了一段时间才把它归结为这个简单的版本。一旦我走上这条路，它就会变得更有意义，并且不需要了解 api 方法