Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<table>
  <thead>
    <tr>
      <th>
        <select class="sort">
          <option value="0">Data 1</option>
          <option value="1">Data 2</option>
          <option value="2">Data 3</option>
        </select>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1 | Text H | Data 5</td>
    </tr>
    <tr>
      <td>Text 3 | Text F | Data 3</td>
    </tr>
    <tr>
      <td>Text 2 | Text G | Data 1</td>
    </tr>
    <tr>
      <td>Text 5 | Text B | Data 2</td>
    </tr>
    <tr>
      <td>Text 8 | Text E | Data 6</td>
    </tr>
    <tr>
      <td>Text 6 | Text C | Data 4</td>
    </tr>
    <tr>
      <td>Text 7 | Text D | Data 8</td>
    </tr>
    <tr>
      <td>Text 9 | Text A | Data 7</td>
    </tr>
  </tbody>
</table>

JavaScript

$(function() {

  var $cell;
  $('table').tablesorter({
    theme: 'blue',
    textSorter: function(a, b) {
      var x = a.split('|'),
        y = b.split('|'),
        i = $cell.val();
      return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
    },
    initialized: function() {
      $cell = $('table thead .sort');
    }
  });

});