Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.2/jquery.mark.js"></script>
Highlight:
<input type="text" name="keyword" data-column="all">
<button type="button" class="reset">Reset</button>
<button type="button" class="search">/(abc|1)/i</button>
<button type="button" class="bad search">/(|)/</button>
<button type="button" class="search">a* 1</button>
<button type="button" class="search">~ge</button>
<br>
<table class="tablesorter">
  <thead>
    <tr>
      <th>AlphaNumeric</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 123</td>
      <td>10</td>
      <td>Koala</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>abc 1</td>
      <td>234</td>
      <td>Ox</td>
     ...

CSS

button {
  font-family: Consolas, monospace;
}

.bad {
  color: #a00;
}

tr td:nth-child(1) mark {
  background: #aa0000;
  color: #fff;
}

tr td:nth-child(2) mark {
  background: #00aa00;
  color: #fff;
}

tr td:nth-child(3) mark {
  background: #0000aa;
  color: #fff;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  var $table = $('table');
  $table.tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter', 'mark'],
    widgetOptions: {
      filter_external: 'input[name="keyword"]',
      filter_reset: '.reset',

      mark_accuracy: 'partially',
      mark_className: '',
      mark_debug: false,
      mark_diacritics: true,
      mark_element: 'mark',
      mark_exclude: [],
      mark_iframes: false,
      mark_log: console,
      mark_separateWordSearch: true,
      mark_synonyms: {},
      mark_done: function(totalMatches){},
      mark_each: function(element){},
      mark_filter: function(node, keyword, matches, totalMatches) { return true; },
      mark_noMatch: function(keyword){}
    }
  });

  // click button to highlight
  $('.search').click(function() {
    var query = [],
      cols = $table[0].config.columns;
    query[cols] = $(this).text();
    $.tablesorter.setFilters($table, query);
  });
});

/*! Widget: mark.js - updated 7/20/2016 (v2.27.0) */
/*
 * Requires tablesorter v2.8+ and jQuery 1.7+
 * by Rob Garrison
 */
;
(function($) {
  'use strict';
  var ts = $.tablesorter;

  ts.mark = {
    init: function(c, wo) {
      if (typeof $.fn.mark === 'function') {
        var update = c.widgetOptions.mark_tsUpdate;
        c.$table.on('filterEnd.tsmark' + (update ? ' ' + update : ''), function() {
          ts.mark.update(c);
        });
      } else {
        console.warn('Widget-mark not initialized: missing "jquery.mark.js"');
      }
    },
    checkRegex: function(regex) {
      if (regex instanceof RegExp) {
        // prevent lock up of mark.js (see https://github.com/julmot/mark.js/issues/55)
        var result = '\u0001\u0002\u0003\u0004\u0005'.match(regex);
        return result === null || result.length < 5;
      }
      return false;
    },
    update: function(c) {
      var options = {},
        regexMark =...