# tablesorter

## Scroller Widget

### Flexible client-side table sorting

Back to documentation

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

Choose Theme:
scroller_jumpToHeader : true (see the note above)*

Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Languages | female | 85 | 80 | 80 | 80
student23 | Mathematics | male | 82 | 77 | 0 | 79
student24 | Languages | female | 100 | 91 | 13 | 82
student25 | Mathematics | male | 22 | 96 | 82 | 53
student26 | Languages | female | 37 | 29 | 56 | 59
student27 | Mathematics | male | 86 | 82 | 69 | 23
student28 | Languages | female | 44 | 25 | 43 | 1
student29 | Mathematics | male | 77 | 47 | 22 | 38
student30 | Languages | female | 19 | 35 | 23 | 10
student31 | Mathematics | male | 90 | 27 | 17 | 50
student32 | Languages | female | 60 | 75 | 33 | 38
student33 | Mathematics | male | 4 | 31 | 37 | 15
student34 | Languages | female | 77 | 97 | 81 | 44
student35 | Mathematics | male | 5 | 81 | 51 | 95
student36 | Languages | female | 70 | 61 | 70 | 94
student37 | Mathematics | male | 60 | 3 | 61 | 84
student38 | Languages | female | 63 | 39 | 0 | 11
student39 | Mathematics | male | 50 | 46 | 32 | 38
student40 | Languages | female | 51 | 75 | 25 | 3
student41 | Mathematics | male | 43 | 34 | 28 | 78
student42 | Languages | female | 11 | 89 | 60 | 95
student43 | Mathematics | male | 48 | 92 | 18 | 88
student44 | Languages | female | 82 | 2 | 59 | 73
student45 | Mathematics | male | 91 | 73 | 37 | 39
student46 | Languages | female | 4 | 8 | 12 | 10
student47 | Mathematics | male | 89 | 10 | 6 | 11
student48 | Languages | female | 90 | 32 | 21 | 18
student49 | Mathematics | male | 42 | 49 | 49 | 72
student50 | Languages | female | 56 | 37 | 67 | 54

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 15.49 | 44.2% | -13
A11 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | 153.19 | 23% | +9
A23 | Mike | Peters | 22 | 5.69 | 20.3% | +2
A55 | Leslie | Kent | 33 | 15.99 | 25.1% | -3
A3 | Frank | Mint | 44 | 12.59 | 44.2% | -12
A21 | Joe | Thomas | 45 | 15.25 | 44% | +12
A12 | Tess | Evans | 66 | 13.59 | 23% | +4
A21 | Peter | Dunn | 12 | 2.99 | 21.1% | +2
A33 | Harry | Jones | 13 | 19.49 | 22.2% | -6
A13 | John | James | 16 | 13.89 | 42.1% | -13
A71 | Nick | Parker | 45 | 13.89 | 44% | +29
A21 | Charles | Dunn | 19 | 15.49 | 22% | +3