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
1 - 10 / 50 (50)
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="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/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

$(function() {

  $.extend($.tablesorter.themes.bootstrap, {
    // these classes are added to the table. To see other table classes available,
    // look here: http://twitter.github.com/bootstrap/base-css.html#tables
    table      : 'table table-bordered',
    caption    : 'caption',
    header     : 'bootstrap-header', // give the header a gradient background
    footerRow  : '',
    footerCells: '',
    icons      : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
    sortNone   : 'bootstrap-icon-unsorted',
    sortAsc    : 'icon-chevron-up glyphicon glyphicon-chevron-up',     // includes classes for Bootstrap v2 & v3
    sortDesc   : 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
    active     : '', // applied when column is sorted
    hover      : '', // use custom css here - bootstrap class may not override it
    filterRow  : '', // filter row class
    even       : '', // odd row zebra striping
    odd        : ''  // even row zebra striping
  });

  // call the tablesorter plugin and apply the uitheme widget
  $("table").tablesorter({
    // this will apply the bootstrap theme if "uitheme" widget is included
    // the widgetOptions.uitheme is no longer required to be set
    theme : "bootstrap",

    widthFixed: true,

    headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!

    // widget code contained in the jquery.tablesorter.widgets.js file
    // use the zebra stripe widget if you plan on hiding any rows (filter widget)
    widgets : [ "uitheme", "filter", "zebra" ],

    widgetOptions : {
      // using the default zebra striping class name, so it actually isn't included in the theme variable above
      // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
      zebra : ["even", "odd"],

      // reset filters button
      filter_reset : ".reset"

      // set the uitheme widget to use the bootstrap theme class names
      // this is no longer required, if theme is set
      // ,uitheme : "bootstrap"

    }
  })
  .tablesorterPager({

    // target the pager markup - see the HTML block below
    container: $(".ts-pager"),

    // target the pager page select dropdown - choose a page
    cssGoto  : ".pagenum",

    // remove rows from the table to speed up the sort of large tables.
    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
    removeRows: false,

    // output string - default is '{page}/{totalPages}';
    // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
    output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

  });

});

Next up: Resizable Columns widget ››

tablesorter

jQuery UITheme Widget (Bootstrap)

Flexible client-side table sorting

Demo

Page Header

Javascript