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/6.1.0/jquery.mark.min.js"></script>
Highlight:
<input type="text" name="keyword" data-column="all">
<p>Options:</p>
<ul>
  <li>
    <input type="checkbox" name="opt[]" value="separateWordSearch" checked> separate word search</li>
  <li>
    <input type="checkbox" name="opt[]" value="diacritics" checked> diacritics</li>
  <li>
    <input type="checkbox" name="opt[]" value="debug"> debug</li>
</ul>
<button type="button" class="reset">Reset</button>
<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>
   ...

CSS

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');

  function mark() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();

    // Determine selected options
    var options = {};
    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");
    });

    var $rows = $(".tablesorter tbody tr");
    $rows.unmark();
    var filters = $.tablesorter.getFilters($table);
    $.each(filters, function(indx, filter) {
      var col = indx === $table[0].config.columns ? '' : ':nth-child(' + (indx + 1) + ')';
      $rows.children(col).mark(filter, options);
    });
  }

  $("input[name='keyword']").on("input", mark);
  $("input[type='checkbox']").on("change", mark);

  $table
    .on('filterEnd', mark)
    .tablesorter({
      theme: 'blue',
      widgets: ['zebra', 'filter'],
      widgetOptions: {
        filter_external: 'input[name="keyword"]',
        filter_reset: '.reset'
      }
    });
});