NOTE!
- This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.
- The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).
- New! In tablesorter v2.4, the
uithemeoption has changed to indicate the theme instead of an array of icons to use:- All theme class names are now contained within
$.tablesorter.themeswith the jQuery UI theme saved to$.tablesorter.themes.jui - The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.
- Set the
uithemewidget option to"jui"to set the widget to use the jQuery UI theme. See the bootstrap demo for another example.
- All theme class names are now contained within
- Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4 requires jQuery 1.2.6+.
Demo
jQuery UI Theme:
| First Name | Last Name | Age | Total | Discount | Date |
|---|---|---|---|---|---|
| First Name | Last Name | Age | Total | Discount | Date |
| Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
| John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
| Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
| Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM |
| Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
Page Header
<!-- ui theme stylesheet - contents shown below --> <link rel="stylesheet" href="../css/theme.jui.css"> <!-- jQuery UI theme (cupertino example here) --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css"> <!-- tablesorter plugin --> <script src="../js/jquery.tablesorter.js"></script> <!-- tablesorter widget file - loaded after the plugin --> <script src="../js/jquery.tablesorter.widgets.js"></script>