在數據表中添加字段的總和

Question

之前已經問過這個問題，但是作為JavaScript的絕對入門者，我不知道如何將其應用於我的代碼。 我希望在表的頁腳中同時顯示“ G”字段和“ AB”字段的總和。

這是我的代碼

<div align="center">
    <table id = 'battingtbl' class="display compact nowrap">
        <thead>
            <tr>
                <th>YEAR</th>
                <th>AGE</th>
                <th>G</th>
                <th>AB</th>
            </tr>
        </thead>
        <tbody>
        {% for stat in playerdata.masterbatting_set.all %}
            <tr>
                <td>{{ stat.year }}</td>
                <td>{{ stat.age }}</td>
                <td>{{ stat.g }}</td>
                <td>{{ stat.ab }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

<script>
    $(document).ready(function () {
    $('#battingtbl').DataTable({
        "searching": true,
        "pageLength": 40,
        "scrollX": true,
        "paging": false,
        "info": false,
    })
});
</script>

Answer 1

我通常不建議用HTML源代碼填充DataTable，我覺得這種方式既乏味又緩慢。

但是，假設您希望在每次重新繪制時重新計算這些總計（表過濾），我建議使用drawCallback選項來填充您的總計：

drawCallback: () => {
             // grab DataTables insurance into the variable
              const table = $('#battingtbl').DataTable();
             // extract all the data for all visible columns
              const tableData = table.rows({search:'applied'}).data().toArray();
             // summarize row data for columns 3,4 (indexes 2, 3)
              const totals = tableData.reduce((total, rowData) => {
                total[0] += parseFloat(rowData[2]);
                total[1] += parseFloat(rowData[3]);
                return total;
              // starting point for reduce() totals for 2 columns equal to zero each
              }, [0,0]);
              // populate footer cells for columns 3, 4 (indexes 2, 3) with corresponding array total
              $(table.column(2).footer()).text(totals[0]);
              $(table.column(3).footer()).text(totals[1]);
            }

上面的要求您將<tfoot>部分附加到准備在服務器端的靜態HTML部分：

<tfoot>
  <tr>
    <th colspan="2">Totals:</th>
    <th></th>
    <th></th>
  </tr>
</tfoot>

因此，完整的示例可能看起來像這樣：

 <!doctype html> <html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> </head> <body> <div align="center"> <table id = 'battingtbl' class="display compact nowrap"> <thead> <tr> <th>YEAR</th> <th>AGE</th> <th>G</th> <th>AB</th> </tr> </thead> <tbody> <tr> <td>2016</td> <td>24</td> <td>15</td> <td>6</td> </tr> <tr> <td>2018</td> <td>32</td> <td>5</td> <td>7</td> </tr> <tr> <td>2016</td> <td>28</td> <td>14</td> <td>9</td> </tr> <tr> <td>2015</td> <td>25</td> <td>9</td> <td>7</td> </tr> </tbody> <tfoot> <tr> <th colspan="2">Totals:</th> <th></th> <th></th> </tr> </tfoot> </table> <script> $(document).ready(function () { $('#battingtbl').DataTable({ "searching": true, "pageLength": 40, "scrollX": true, "paging": false, "info": false, drawCallback: () => { const table = $('#battingtbl').DataTable(); const tableData = table.rows({ search: 'applied' }).data().toArray(); const totals = tableData.reduce((total, rowData) => { total[0] += parseFloat(rowData[2]); total[1] += parseFloat(rowData[3]); return total; }, [0, 0]); $(table.column(2).footer()).text(totals[0]); $(table.column(3).footer()).text(totals[1]); } }) }); </script> </body> </html>

在數據表中添加字段的總和

問題描述

1 個解決方案

解決方案1
1 已采納 2019-05-08 15:19:39

在數據表中添加字段的總和

問題描述

1 個解決方案

解決方案1 1 已采納 2019-05-08 15:19:39

解決方案1
1 已采納 2019-05-08 15:19:39