tablesorter

jQuery UITheme Widget (jQuery UI)

Flexible client-side table sorting

NOTE!

• In v2.27.0, the icon class name changes used by jQuery 1.12.0 have been included. Icon class names were renamed from using "carat" to "caret"; this widget now includes both for backwards compatibility.
• In v2.19.0, this widget allows dynamic changing of themes; including switching from jQuery UI or Bootstrap to any other theme. To change a theme, do the following:

  var $table = $('table');
  $table[0].config.theme = 'grey';
  $table.trigger('applyWidgets');

  To see this work, check out the scroller widget demo.
• As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
• You will need to modify the headerTemplate option to include the bootstrap icon! See the example in the code (v2.7).
• The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).
• In tablesorter v2.4, the uitheme option has changed to indicate the theme instead of an array of icons to use:
  • All theme class names are now contained within $.tablesorter.themes with 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 uitheme widget option to "jui" to set the widget to use the jQuery UI theme. See the bootstrap demo for another example.
• Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.

Demo

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="css/jquery-ui.min.css">

<!-- load jQuery first -->
<script src="js/jquery.min.js"></script>

<!-- 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

HTML