Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://rawgit.com/christianbach/tablesorter/master/themes/blue/style.css">
<script src="https://rawgit.com/christianbach/tablesorter/master/jquery.tablesorter.min.js"></script>
<table cellspacing="1" class="tablesorter">
  <thead>
    <tr>
      <th>first name</th>
      <th>last name</th>
      <th>age</th>
      <th>total</th>
      <th>discount</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>peter</td>
      <td>parker</td>
      <td>28</td>
      <td>9.99</td>
      <td>20.3%</td>
      <td>+3</td>
    </tr>
    <tr>
      <td>john</td>
      <td>hood</td>
      <td>33</td>
      <td>19.99</td>
      <td>25.1%</td>
      <td>-7</td>
    </tr>
    <tr>
      <td>clark</td>
      <td>kent</td>
      <td>18</td>
      <td>15.89</td>
      <td>44.2%</td>
      <td>-15</td>
    </tr>
    <tr>
      <td>bruce</td>
      <td>almighty</td>
      <td>45</td>
      <td>153.19</td>
      <td>44%</td>
      <td>+19</td>
    </tr>
    <tr>
      <td>bruce</td>
      <td>evans</td>
      <td>56</td>
      <td>153.19</td>
      <td>23%</td>
      <td>+9</td>
    </tr>
  </tbody>
</table>

JavaScript

/* Documentation for tablesorter
 * https://github.com/christianbach/tablesorter
 */

$(function() {
  $('table').tablesorter({

    // customize header HTML
    onRenderHeader: function(index) {
      $(this)
        .wrapInner('<span class="inner-header"/>')
        .find('.inner-header')
        .click(function() {
          console.log('header text clicked');
          return false;
        });
    }

  });
});