Search code examples
jquerytwitter-bootstraptablesorter

Tablesorter Scroller bootstrap not working


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>

Solution

  • 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_'
        }
    });