Tablesorter demo

All options included, as well as the uitheme widget

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th class="filter-select filter-match sorter-html filter-parsed">Animals</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Koala</td>
    </tr>
    <tr>
      <td>Ox
        <br> Bison</td>
    </tr>
    <tr>
      <td>Girafee
        <br> Ox</td>
    </tr>
    <tr>
      <td>Bison
        <br> Chimp</td>
    </tr>
    <tr>
      <td>Chimp</td>
    </tr>
    <tr>
      <td>Elephant</td>
    </tr>
    <tr>
      <td>Lion</td>
    </tr>
    <tr>
      <td>Zebra
        <br>Lion</td>
    </tr>
    <tr>
      <td>Koala</td>
    </tr>
    <tr>
      <td>Llama</td>
    </tr>
  </tbody>
</table>

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

  $.tablesorter.addParser({
    id: 'html',
    is: function() {
      return false;
    },
    format: function(str, table, cell) {
      var c = table.config,
        html = cell.innerHTML;
      if (html) {
        html = html.replace(/\s*<br\s*\/?>\s*/g, ',')
        html = $.trim(c.ignoreCase ? html.toLocaleLowerCase() : html);
        html = c.sortLocaleCompare ? $.tablesorter.replaceAccents(html) : html;
      }
      return html;
    },
    type: 'text'
  });

  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    widgetOptions: {
      filter_selectSource: function(table, column, onlyAvail) {
        var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
        return array.join(',').split(/\s*,\s*/);
      }
    }
  });
});