Math + Filter + dynamically added rows

by Herst

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/dist/css/theme.default.min.css">
<script src="https://rawgit.com/Mottie/tablesorter/a8d9c2bbbe7e89c7abfd3668e0e39f3459f2c708/js/jquery.tablesorter.combined.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/a8d9c2bbbe7e89c7abfd3668e0e39f3459f2c708/js/widgets/widget-math.js"></script>
<table id="table1" class="tablesorter">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th data-math="col-sum">col-sum</th>
      <th data-math="col-sum">col-sum</th>
    </tr>
  </tfoot>

  <tbody>

  </tbody>

</table>

<button type="button" id="btnLoad">Load Data</button>

CSS

/* make all calculated values bold */
	.tablesorter tbody td[data-math] {
	  font-weight: bold;
	}
	/* darken first & last column */
	.tablesorter tbody th,
	.tablesorter tbody tr td.totals {
	  font-family: 'trebuchet ms', verdana, arial;
	  font-size: 13px;
	  font-weight: normal;
	  background-color: #ddd;
	  text-shadow: none;
	}
	/* even darker tbody info row & tfoot */
	.tablesorter tbody.tablesorter-infoOnly th,
	.tablesorter tfoot th,
	.tablesorter tfoot th.tablesorter-headerAsc,
	.tablesorter tfoot th.tablesorter-headerDesc {
	  background-color: #aaa;
	  font-family: 'trebuchet ms', verdana, arial;
	  font-size: 13px;
	  font-weight: bold;
	  background-color: #aaa;
	  text-shadow: none;
	}
	/* align decimals in Grand Total column */
	.align-decimal {
	  width: 100px;
	  display: inline-block;
	  text-align: right;
	}

JavaScript

$('#table1').tablesorter({
  //delayInit: true,
  widgets: ['zebra', 'filter', 'math'],
  widgetOptions: {
    // math_event: "updateComplete"
  }
});

$('#btnLoad').click(function () {
  var $tblBody = $("#table1 tbody");
  
  $tblBody.empty();
  
  for (var i=0; i < 10; ++i) {
    $("<tr></tr>")
      .append("<td>" + i + "</td><td>" + i + (i % 3) + "</td>")
      .appendTo($tblBody);
  }
  
  $("#table1").trigger("update");
});