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" placeholder="Lorem ipsum...">
<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>
<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>
     ...

JavaScript

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

  var mark = function() {
    // 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");
    });

    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".tablesorter").unmark().mark(keyword, options);
  };

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


  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columns']
  });
});