Question

我尝试将Tablesorter与滚动小部件一起使用。与此相同 - http://jsfiddle.net/Mottie/856bzzeL/146/

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

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

Answer 1

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

实际上有两种不同的粘贴标题小部件。

stickyHeaders - 使用javascript将粘贴标题放在页面顶部。此小部件需要复制表工作的thead。
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_'
        }
    });

});

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

1 个答案: