tablesorter how to set dynamic scroller height

问题

I'm trying to use Tablesorter with the scroller widget. same as this - http://jsfiddle.net/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?

回答1:

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_'
        }
    });

});

来源：https://stackoverflow.com/questions/30193729/tablesorter-how-to-set-dynamic-scroller-height

标签

tablesorter