NOTE!
- In v2.17.2
- 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
to18
.
- 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 is300
.scroller_barWidth
- Set the width (default is17
) 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_jumpToHeader
- Whentrue
, 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 |