tablesorter

jQuery UITheme Widget (Bootstrap v3.x)

Flexible client-side table sorting

NOTE!

• In v2.28.4, added support for the column widget.
• In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
  • Note the changes to the sorting icons in the $.tablesorter.themes.bootstrap defaults below.
  • Just use the appropriate icon class name (icon-{name} for Bootstrap v2, and glyphicon glyphicon-{name} for Bootstrap v3.
  • And of course include the necessary Bootstrap image or font).
  • Wrapped all of the pager controls in the tfoot within a div (don't use the class name pager as it adds a lot of padding) to keep the controls from being centered.
  • Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.
• 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.
• Added in 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.
• 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="css/theme.bootstrap.css">

<!-- tablesorter plugin -->
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>

<!-- pager plugin -->
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
<script src="js/jquery.tablesorter.pager.js"></script>

Javascript

HTML