NOTE!
- This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.
- You will need to modify the
headerTemplate
option to include the jQuery UI icon! See the example in the code. New! v2.7! - Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!
- Added
widgetOptions.stickyHeader
option which contains the css class name applied to the actual sticky header. New! v2.1 - Multiple rows in the header will become sticky. New! v2.1.17
- The filter widget adds a row to the table header, but that row will not be included in the sticky header.
- Add the class name
sticky-false
to any header rows you don't want to become sticky. New! v2.1.18 Because of an issue with jQuery version 1.3 and older causing an error, this widget needs at least jQuery version 1.4+ in order to work.Now working with jQuery 1.2.6+ again.- Because of the limitations of Internet Explorer version 7 and older, this widget will not work.
For the sticky header to work properly if anyFixed! v2.4<TD>
's are included within the header:Set theselectorHeaders
option tothead th, thead td
.The<TD>
may not be styled properly, so CSS changes may be needed.To prevent the<TD>
from being sortable, add asorter-false
class name.
Javascript
$(function(){ $("table").tablesorter({ widthFixed : true, headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7! widgets: ["columns", "filter", "stickyHeaders", "uitheme", "zebra"] , //[ 'uitheme', 'zebra', 'stickyHeaders' ], widgetOptions: { // css class name applied to the sticky header row (tr) stickyHeaders : 'tablesorter-stickyHeader', // adding zebra striping, using content and default styles - the ui css removes the background from default // even and odd class names included for this demo to allow switching themes zebra : ["ui-widget-content even", "ui-state-default odd"], // use uitheme widget to apply defauly jquery ui (jui) class names // see the uitheme demo for more details on how to change the class names uitheme : 'jui' } }); });
Demo
Choose Theme:Personal Information for each person (resize the browser to check expanding height) |
Courses (this is a TD cell) |
|||||
---|---|---|---|---|---|---|
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 |
Personal Information for each person (resize the browser to check expanding height) |
Courses (this is a TD cell) |
|||||
---|---|---|---|---|---|---|
Name | Major | Sex | English | Japanese | Calculus | Geometry |
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 |
Account # | First Name | Last Name | Age | Total | Discount | Diff |
---|