我正在尝试使用Tablesorter和滚动器小部件。我似乎无法正确地做到这一点。bootstrap.css似乎会影响固定标头的大小。
这是问题的一个例子。如果我们没有bootstrap.css那么它会工作如图所示这里
这是Tablesorter代码:
$(".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_'
}
这是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>
该演示缺少theme.bootstrap.css
文件和一些选项(主题和uitheme小部件;已更新的演示)
$(".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_'
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句