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">
<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/js/widgets/widget-formatter.js"></script>
<table id="table" class="tablesorter">
  <thead>
    <tr>
      <th class="emphasize">Super Hero</th>
      <th class="supercar">Super Car</th>
      <th class="duckify filter-select">Image Links</th>
      <th class="date">Added</th>
    </tr>
  </thead>
  <tbody>
    <!-- Added column dates are dynamically updated for this demo -->
    <tr><td>Superman</td><td>Bugatti Veyron</td><td>Duckie</td><td>3/1/2016 15:13:19</td></tr>
    <tr><td>Flash</td><td>Hennessey Venom</td><td>Horse</td><td>2/21/2016 9:14:59</td></tr>
    <tr><td>Batman</td><td>Koenigsegg Agera</td><td>Elephant</td><td>3/1/2016 9:54:59</td></tr>
    <tr><td>Green Lantern</td><td>SSC Ultimate Aero</td><td>Cow</td><td>3/1/2016 15:28:19</td></tr>
    <tr><td>Howard the Duck</td><td>Koenigsegg CCX</td><td>Pizza</td><td>4/7/2014 5:48:19</td></tr>
    <tr><td>Wonder Woman</td><td>McLaren F1</td><td>Tiger</td><td>12/30/2012 5:41:39</td></tr>
  </tbody>
</table>

CSS

#table strong {
  color: #a00;
}

JavaScript

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

  $('.tablesorter').tablesorter({
    theme: 'blue',
    widgets: ['formatter', 'filter'],
    widgetOptions: {
      filter_useParsedData: true,
      formatter_column: {
        '.emphasize' : function( text, data ) {
          return '<strong>' + text + '</strong>';
        },
        '.supercar' : function( text, data ) {
          if ( text === '' ) { return ''; }
          // replace table cell with a link
          return '<a href="https://www.google.com/search?tbm=isch&q=' + text.replace(/\s/g, '+') + '">' + text + '</a>';
        },
        '.date' : function( text, data ) {
          var date = new Date( text );
          if ( date instanceof Date && isFinite( date ) ) {
            data.$cell.attr( data.config.textAttribute, text );
            return '<em>' + prettyDate( date ) + '</em>';
          }
          return text;
        },
        '.duckify' : function( text, data ) {
          if ( text === '' ) { return ''; }
          // add text to data-attribute; this overrides the parser
          data.$cell.attr( data.config.textAttribute, text );
          // replace table cell with a link
          return '<a href="https://duckduckgo.com/?ia=images&q=' + text + '">Search The Duck</a>';
        },
        '.blue' : function( text, data ) {
          return '<span class="blue">' + text + '</span>';
        }
      }
    }
  });

});

/*
 * JavaScript Pretty Date (MODIFIED)
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */
function prettyDate(date){
  var diff = (((new Date()).getTime() - date.getTime()) / 1000),
    day_diff = Math.floor(diff / 86400);
  if ( isNaN(day_diff) || day_diff < 0 ) { return ''; }
  return day_diff == 0 && (
    diff < 60 && 'just now' ||
    diff < 120 && '1 minute ago' ||
    diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
    diff < 7200 && '1 hour...