Search code examples
javascriptjquerycsstablesorter

Show the button at the table bottom even when the window is very small


I have a table sorter html page, the sample is here.

$('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'scroller'],
    widgetOptions: {
        scroller_height: 400
    }
});

How can I make the bottom button visible even when the windows height is very small (say, can only show one or two rows)? Ideally scroller_height can be some type like $(window).height()/2 and it can automatically update when the window is resized. The expected is that even when the window is small, the bottom button appears in the screen without scroll action.


Solution

  • If you want to make the scroller window dynamically adjust its height, there are two demos on the main wiki page under Widgets > Scroller.

    Essentially, all you need to do is adjust the outer scroll window height

    $('.tablesorter-scroller-table').css({
      height: '',
      'max-height': height + 'px'
    });
    

    Here is the demo you shared updated, and has a minimum height set to 100px.