Adding the sum of a field in Datatables
Question
This question has been asked before but as an absolute beginner with JavaScript I don't know how to apply this to my code. I would like the sum for both the 'G' field and sum for the 'AB' field to be displayed in the footer of my table.
Here's my code
<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>
1 answers
solution1
1 ACCPTED 2019-05-08 15:19:39
I normally do not suggest to populate DataTable with HTML source, I find this way tedious and slow.
However, assuming you want those totals to get recalculated upon each re-draw (table filtering), I'd suggest to employ drawCallback option to populate your totals:
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]);
}
Above requires you to append <tfoot> section to the static HTML part you prepare server-side:
<tfoot>
<tr>
<th colspan="2">Totals:</th>
<th></th>
<th></th>
</tr>
</tfoot>
So, complete example might look something, like this:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.