NOTE!

Demo


jQuery UI Theme:

First Name
Last Name
Age
Total
Discount
Date
First Name Last Name Age Total Discount Date
Peter Parker 28 $9.99 20% Jul 6, 2006 8:14 AM
John Hood 33 $19.99 25% Dec 10, 2002 5:14 AM
Clark Kent 18 $15.89 44% Jan 12, 2003 11:14 AM
Bruce Almighty 45 $153.19 44% Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% Jan 18, 2007 9:12 AM

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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.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 the themes to change any of the default class names ** NEW **
  $.extend($.tablesorter.themes.jui, {
    // change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
    table      : 'ui-widget ui-widget-content ui-corner-all', // table classes
    header     : 'ui-widget-header ui-corner-all ui-state-default', // header classes
    footerRow  : '',
    footerCells: '',
    icons      : 'ui-icon', // icon class added to the <i> in the header
    sortNone   : 'ui-icon-carat-2-n-s',
    sortAsc    : 'ui-icon-carat-1-n',
    sortDesc   : 'ui-icon-carat-1-s',
    active     : 'ui-state-active', // applied when column is sorted
    hover      : 'ui-state-hover',  // hover class
    filterRow  : '',
    even       : 'ui-widget-content', // odd row zebra striping
    odd        : 'ui-state-default'   // even row zebra striping
  });

  // call the tablesorter plugin and apply the ui theme widget
  $("table").tablesorter({

    theme : 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+

    headerTemplate : '{content} {icon}', // needed to add icon for jui theme

    // widget code now contained in the jquery.tablesorter.widgets.js file
    widgets : ['uitheme', 'zebra'],

    widgetOptions : {
      // zebra striping class names - the uitheme widget adds the class names defined in
      // $.tablesorter.themes to the zebra widget class names
      zebra   : ["even", "odd"],

      // set the uitheme widget to use the jQuery UI theme class names
      // ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
      // uitheme : 'jui'
    }

  });

});

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

Next up: UITheme widget - Bootstrap theme ››
Second time around: Modifying the Header during rendering ››