tablesorter

Scroller Widget

Flexible client-side table sorting

NOTE!

• In v2.17+
  • The scroller widget will now work properly with predefined column widths.
  • Shrinking the browser window will now hide the header overflow.
  • Horizontal scrolling of the table body will now properly horizontally scroll the header.
  • Changed the default scroll bar width from 17 to 18.
  • Added scroller_upAfterSort option.
• This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use this version of the widget.
• This widget was originally written by Connell & Associates, Inc. and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.
• Scroller widget options include:
  • scroller_height - Set the height of the scroll window in pixels (default is 300).
  • scroller_barWidth - Set the width (default is 17) of the scroll bar in pixels. This will need to be changed if using a custom scroll bar plugin.
  • scroller_idPrefix - This option contains a prefix string which is added to a random number. This id is then assigned to the wrapping scroll element. Modification is not necessary unless the prefix interferes with ID's already on your page.
  • scroller_upAfterSort - when true (default), the scroller automatically scrolls the inner window back to the top after sorting. Set this option to false to prevent this, or stop the window from scrolling after interacting with a table cell (e.g. clicking on a checkbox); new in v2.17.3.
  • scroller_jumpToHeader - When true, this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.
    * To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.

Javascript

Demo