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

本文介绍了tablesorter 如何设置动态滚动条高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

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

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

解决方案

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

实际上有两种不同的粘性标题小部件.

stickyHeaders - 使用 javascript 定位粘性页面顶部的标题.此小部件需要复制表格工作的 thead.css3StickyHeaders - 使用 javascript 和 css3转换以将粘性标题定位在页面顶部.不需要重复的表格元素.

<小时>

更新:stickyHeaders 小部件当前与滚动小部件不兼容.

但是如果你想让滚动小部件像你描述的那样工作，把 scroller_height 设为一些大的数字，因为它只设置了 tbody 的最大高度.然后添加一些额外的 css 来隐藏滚动条 (demo)

CSS

.tablesorter-scroller .tablesorter-scroller-table {溢出-y:隐藏；}

脚本

$(function () {$('table').tablesorter({主题:'蓝色'，//widthFixed: true,//<- 现在由滚动小部件自动设置显示处理:真，小部件:['斑马'，'滚动']，小部件选项:{scroller_fixedColumns: 1,滚动高度:3000，//排序后将 tbody 滚动到顶部scroller_upAfterSort: 假，//向上滚动页面时将表头弹出到视图中scroller_jumpToHeader: 假，//在tablesorter v2.19.0 中自动检测滚动条宽度//在此处添加一个值以覆盖自动检测的设置scroller_barWidth: 空//scroll_idPrefix 在 v2.18.0 中被移除//scroller_idPrefix : 's_'}});});

I'm trying to use Tablesorter with the scroller widget. same as this - http://jsfiddle/Mottie/856bzzeL/146/

The widget options is asking for scroller_height. my table is dynamic so i can't tell the table height since i don't know how many rows i have. I tried to delete the scroller_height but there is a default out there.

How can i get the full table rows without vertical scroller and with sticky header?

解决方案

It sounds like you want a sticky header and not the scroller widget.

There are actually two different sticky headers widgets.

stickyHeaders - uses javascript to position the sticky headers at the top of the page. This widget requires duplicating the thead of the table work. css3StickyHeaders - uses javascript and css3 transform to position the sticky headers at the top of the page. No duplicate table elements needed.

---

Update: the stickyHeaders widgets are not currently compatible with the scroller widget.

But if you want to make the scroller widget work as you described, make the scroller_height some big number, because it only sets the max-height of the tbody. Then add some extra css to hide the scrollbar (demo)

CSS

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

Script

$(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 如何设置动态滚动条高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！