JSFiddle - React, Tailwind, and code Playground

by rotailed

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<table id="example" class="display">
<tr><th>Name</th><th>Age</th><th>Weight</th></tr>
 
<tr><td>Joe</td><td>30</td><td class="sum">175</td><td class="sum">1</td></tr>
<tr><td>Jack</td><td>29</td><td class="sum">165</td><td class="sum">1</td></tr>
<tr><td>Jim</td><td>31</td><td class="sum">178</td><td class="sum">1</td></tr>
<tr><td>Jeff</td><td>28</td><td class="sum">173</td><td class="sum">1</td></tr>
<tr><th colspan="2" align="right">Sum</th><td class="subtotal"></td><td class="subtotal"></td></tr>
<tr><td>Jane</td><td>30</td><td class="sum">120</td><td class="sum">2</td></tr>
<tr><td>Jackie</td><td>30</td><td class="sum">112</td><td class="sum">2</td></tr>
<tr><th colspan="2" align="right">Sum</th><td class="subtotal"></td><td class="subtotal"></td></tr>
<tr><th colspan="2" align="right">Total</th><td class="total"></td><td class="total"></td></tr>
</table>

JavaScript

$(document).ready(function() {
    $('#example').DataTable();
} );

$(function(){
	function tally (selector) {
		$(selector).each(function () {
			var total = 0,
				column = $(this).siblings(selector).andSelf().index(this);
			$(this).parents().prevUntil(':has(' + selector + ')').each(function () {
				total += parseFloat($('td.sum:eq(' + column + ')', this).html()) || 0;
			})
			$(this).html(total);
		});
	}
	tally('td.subtotal');
	tally('td.total');
});