tablesorter

jQuery UITheme Widget (Bootstrap)

Flexible client-side table sorting

NOTE!

• As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
• Make sure to include the {icon} in the headerTemplate to add a sorting arrow to the headers.
• New! v2.7!
  • You will need to modify the headerTemplate option to include the bootstrap icon! See the example in the code.
  • Setting theme option to "Bootstrap" will now override/ignore the uitheme value in the widgetOptions.
• New! 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 Bootstrap theme saved to $.tablesorter.themes.bootstrap.
  • 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 theme option (changed in v2.7) to "bootstrap" to set the widget to use the Bootstrap theme. See the jQuery UI demo for another example.
• This demo shows how to get around an issue with the filter widget:
  • The zebra widget button below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css nth-child() selector.
  • To better understand this issue, disable the zebra widget (using the toggle button). Now Filter ">80" in the "Calculus" column.
  • Try other filter searches with the zebra widget disabled, like Filter "male" in the "Sex" column.
  • To solve this issue, just enable the zebra widget and the "even" and "odd" row class names will should over-ride the nth-child() styling.
    NOTE! This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.
  • The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.
• This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.

Demo

Page Header

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="/css/bootstrap.min.css">

<!-- bootstrap widget theme -->
<link rel="stylesheet" href="/tablesorter/css/theme.bootstrap.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