1

我正在尝试使用 Tablesorter 和滚动小部件。我似乎无法正确处理。似乎 bootstrap.css 会影响固定标头的大小。

这是问题的一个例子。如果我们没有 bootstrap.css 那么它会像这里所示的那样工作

这是表格排序器代码：

$(".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>
4

2 回答 2

0

演示缺少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_'
    }
});
于 2013-08-19T15:21:24.090 回答
0

编辑：上述响应对我（Firefox 29）不起作用，另一方面，r0n22 在评论中对scroller.js 的更改确实有效。

scoller 插件中有一个错误。第 206 行：应该是 $hdr.width($tbl.innerWidth()).parent().width($tbl.innerWidth()); 现在它已修复，系统运行良好！

于 2014-05-15T11:45:03.507 回答