I am trying to use Tablesorter and the scroller widget. I just cant seem to get it right. It seems that bootstrap.css affects the resizing of the fixed header.
Here is an example of the problem. And if we do not have bootstrap.css then it will work as shown here
Here is the Tablesorter Code:
$(".tablesorter").tablesorter({
widthFixed : true,
showProcessing: true,
headerTemplate : '{content} {icon}',
widgets: [ 'zebra', 'scroller' ],
widgetOptions : {
scroller_height : 300,
scroller_barWidth : 17,
scroller_jumpToHeader: true,
scroller_idPrefix : 's_'
}
Here is the HTML:
<div class="row">
<div class="span12 hidden-phone">
<table class="tablesorter">
<caption>Student Grades</caption>
<thead>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
</thead>
<tfoot>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
</tfoot>
<tbody>
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
</tbody>
</table>
The demo is missing the theme.bootstrap.css
file and a few options (theme & uitheme widget; updated demo)
$(".tablesorter").tablesorter({
theme: 'bootstrap', // set bootstrap theme
widthFixed: true,
showProcessing: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra', 'uitheme', 'scroller'], // include uitheme widget
widgetOptions: {
scroller_height: 300,
scroller_barWidth: 17,
scroller_jumpToHeader: true,
scroller_idPrefix: 's_'
}
});