Math + Filter + dynamically added rows

by Herst

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.widgets.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-math.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-cssStickyHeaders.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>

CSS

.tablesorter tbody th,
	.tablesorter tbody tr td.totals {
	  background-color: #ddd;
	}

JavaScript

$('#table1').tablesorter({
  //delayInit: true,
  widgets: [
    'zebra',
    'filter',
    'math',
    'cssStickyHeaders'
  ],
  theme: 'bootstrap',
  widgetOptions: {
    filter_cssFilter: 'form-control'
  }
});

function updateData() {
  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");
};

updateData();