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. New! v2.1
- If the "widgetUitheme" option exists, it will over-ride this newer "widgetOptions.uitheme" option in order to maintain backwards compatibility.
- The latest version of jQuery UI appears to need jQuery 1.4+ or script errors will break the plugin.
Demo
jQuery UI Theme:Tablesorter Theme:
| 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/ui/style.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>
Javascript
CSS
/* jQuery UI Theme required css; as seen in css/ui/style.css file */
table.tablesorter {
font-family: arial;
margin: 10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
padding: 5px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr th {
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
white-space: normal;
/* UI hover and active states make the font normal and the table resizes, this fixes it */
font-weight: bold !important;
}
table.tablesorter thead tr th .tablesorter-inner {
position: relative;
padding-right: 20px; /* wider than the icon */
}
table.tablesorter thead tr th .ui-icon {
position: absolute;
right: 3px;
top: 50%;
margin-top: -8px; /* half the icon height; older IE doesn't like this */
}
table.tablesorter tbody td {
padding: 4px;
vertical-align: top;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter tr.ui-state-default {
background-image: url();
}
/* filter widget */
table.tablesorter thead input.tablesorter-filter {
width: 95%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.tablesorter thead tr.tablesorter-filter, table.tablesorter thead tr.tablesorter-filter td {
text-align: center;
}
/* optional disabled input styling */
table.tablesorter thead tr.tablesorter-filter input.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
}