jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap)

# tablesorter

## jQuery UITheme Widget (Bootstrap)

### Flexible client-side table sorting

Back to documentation

NOTE!

- New!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
    in the "Calculus" column.
  - Try other filter searches with the zebra widget disabled, like
    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

Reset filter :
Zebra widget :

Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Mathematics | male | 82 | 77 | 0 | 79
Student24 | Languages | female | 100 | 91 | 13 | 82
Student25 | Mathematics | male | 22 | 96 | 82 | 53
Student26 | Languages | female | 37 | 29 | 56 | 59
Student27 | Mathematics | male | 86 | 82 | 69 | 23
Student28 | Languages | female | 44 | 25 | 43 | 1
Student29 | Mathematics | male | 77 | 47 | 22 | 38
Student30 | Languages | female | 19 | 35 | 23 | 10
Student31 | Mathematics | male | 90 | 27 | 17 | 50
Student32 | Languages | female | 60 | 75 | 33 | 38
Student33 | Mathematics | male | 4 | 31 | 37 | 15
Student34 | Languages | female | 77 | 97 | 81 | 44
Student35 | Mathematics | male | 5 | 81 | 51 | 95
Student36 | Languages | female | 70 | 61 | 70 | 94
Student37 | Mathematics | male | 60 | 3 | 61 | 84
Student38 | Languages | female | 63 | 39 | 0 | 11
Student39 | Mathematics | male | 50 | 46 | 32 | 38
Student40 | Languages | female | 51 | 75 | 25 | 3
Student41 | Mathematics | male | 43 | 34 | 28 | 78
Student42 | Languages | female | 11 | 89 | 60 | 95
Student43 | Mathematics | male | 48 | 92 | 18 | 88
Student44 | Languages | female | 82 | 2 | 59 | 73
Student45 | Mathematics | male | 91 | 73 | 37 | 39
Student46 | Languages | female | 4 | 8 | 12 | 10
Student47 | Mathematics | male | 89 | 10 | 6 | 11
Student48 | Languages | female | 90 | 32 | 21 | 18
Student49 | Mathematics | male | 42 | 49 | 49 | 72
Student50 | Languages | female | 56 | 37 | 67 | 54

## 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>
    <!-- tablesorter widget file - loaded after the plugin -->
    <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

Next up: Resizable Columns widget ››