在数据表中添加字段的总和

debugcn 发表于 Dev

尼克·T

之前有人问过这个问题，但作为 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>

叶夫根·戈尔邦科夫

我通常不建议用 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。