tablesorter如何设置动态滚动条高度

Question

我正在尝试将 Tablesorter 与滚动小部件一起使用。和这个一样——http://jsfiddle.net/Mottie/856bzzeL/146/

小部件选项要求scroller_height。我的桌子是动态的，所以我不能告诉桌子的高度，因为我不知道我有多少行。 我试图删除scroller_height，但那里有一个默认值。

如何在没有垂直滚动条和粘性标题的情况下获得完整的表格行？

Answer 1

听起来你想要一个粘性标题而不是滚动小部件。

实际上有两个不同的粘性标题小部件。

1. stickyHeaders - 使用 javascript 将粘性标题放置在页面顶部。这个小部件需要复制表格的thead。
2. css3StickyHeaders - 使用 javascript 和 css3 转换将粘性标题定位在页面顶部。不需要重复的表格元素。

---

更新：stickyHeaders 小部件目前与滚动小部件不兼容。

但是，如果您想让滚动小部件按照您的描述工作，请将 scroller_height 设置为一个大数字，因为它只设置 tbody 的最大高度。然后添加一些额外的 css 来隐藏滚动条 (demo)

CSS

.tablesorter-scroller .tablesorter-scroller-table {
    overflow-y: hidden;
}

脚本

$(function () {

    $('table').tablesorter({
        theme: 'blue',
        // widthFixed: true, // <- now automatically set by the scroller widget
        showProcessing: true,
        widgets: ['zebra', 'scroller'],
        widgetOptions: {
            scroller_fixedColumns: 1,
            scroller_height: 3000,
            // scroll tbody to top after sorting
            scroller_upAfterSort: false,
            // pop table header into view while scrolling up the page
            scroller_jumpToHeader: false,
            // In tablesorter v2.19.0 the scroll bar width is auto-detected
            // add a value here to override the auto-detected setting
            scroller_barWidth: null
            // scroll_idPrefix was removed in v2.18.0
            // scroller_idPrefix : 's_'
        }
    });

});