Tablesorter demo
All options included, as well as the uitheme widget
by Mottie
HTML
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-output.js"></script>
<script src="https://mottie.github.io/tablesorter/js/parsers/parser-input-select.js"></script>
<button class="download">Get CSV</button>
<table>
<thead>
<tr>
<th class="sorter-checkbox">Test <input type="checkbox"></th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" checked=""></td><td>10</td></tr>
<tr><td><input type="checkbox"></td><td>29</td></tr>
<tr><td><input type="checkbox"></td><td>10</td></tr>
<tr><td><input type="checkbox"></td><td>3</td></tr>
<tr><td><input type="checkbox" checked=""></td><td>3</td></tr>
<tr><td><input type="checkbox"></td><td>1</td></tr>
<tr><td><input type="checkbox"></td><td>4</td></tr>
<tr><td><input type="checkbox" checked=""></td><td>2</td></tr>
<tr><td><input type="checkbox"></td><td>55</td></tr>
<tr><td><input type="checkbox" checked=""></td><td>4</td></tr>
</tbody>
</table>
JavaScript
$(function() {
var $table = $('table');
$('.download').click(function() {
$table.trigger('outputTable');
});
$table.tablesorter({
theme: 'blue',
widgets: ['zebra', 'output'],
widgetOptions: {
output_formatContent: function(c, wo, data) {
return data.isHeader ? data.content : data.parsed;
}
}
});
});