cssStickyHeaders and Bootstrap Buttons
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://rawgit.com/Mottie/tablesorter/master/dist/js/jquery.tablesorter.combined.min.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/dist/js/widgets/widget-math.min.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/dist/js/widgets/widget-cssStickyHeaders.min.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 thead tr {
background-color: #444 !important;
color: #ddd !important;
}
.tablesorter thead {
}
.tablesorter tbody .btn span.glyphicon {
}
JavaScript
$(function() {
$('#table1').tablesorter({
// delayInit: true,
// debug: true,
theme: 'bootstrap',
widgets: [
'zebra',
'filter',
'math',
'cssStickyHeaders',
'uitheme'
],
widgetOptions: {
filter_cssFilter: 'form-control',
filter_reset: 'btn btn-xs',
cssStickyHeaders_filteredToTop: false
}
});
var icons = ['tower', 'stats', 'knight', 'lamp', 'ruble'];
function updateData() {
var $tblBody = $("#table1 tbody");
$tblBody.empty();
for (var i = 0; i < 66; ++i) {
var btnStr = '';
for (var j = 0; j < 9; ++j) {
btnStr += '<span class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-' +
icons[Math.floor(Math.random() * icons.length)] + '" aria-hidden="true"></span></span>';
}
$("<tr></tr>")
.append('<td>' + i + '</td><td>' + btnStr + '</td>')
.appendTo($tblBody);
}
$("#table1").trigger("update");
}
updateData();
});