Math + Filter + dynamically added rows
HTML
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.combined.js"></script>
<script src="http://mottie.github.io/tablesorter/js/widgets/widget-math.js"></script>
<script src="http://mottie.github.io/tablesorter/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
/* 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
$(function() {
$('#table1').tablesorter({
//delayInit: true,
// debug: true,
theme: 'blue',
widgets: ['zebra', 'filter', 'math',
'cssStickyHeaders'
],
widgetOptions: {
// math_event: "updateComplete",
filter_liveSearch: false,
cssStickyHeaders_filteredToTop: false
}
});
var $scrollEl, scrollPos, scrollTop, undef;
function updateData() {
var $tblBody = $("#table1 tbody");
$tblBody.empty();
for (var i = 0; i < 20; ++i) {
$("<tr></tr>")
.append("<td>" + i + "</td><td>" + (Math.floor(Math.random() * (1000000 - 100000)) + 100000) + "</td>")
.appendTo($tblBody);
}
$("#table1").trigger("update");
}
setInterval(updateData, 1000);
});