Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-print.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/high-specificity/theme.blue.specific.css">
<table class="tablesorter-blue">
  <thead>
    <tr>
      <th class="filter-select">First Name</th>
      <th>Last Name</th>
      <th>City</th>
      <th>Age</th>
      <th data-placeholder="Select a filter">Total</th>
      <th class="filter-select">Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aaron</td>
      <td>Johnson Sr</td>
      <td>Atlanta</td>
      <td>35</td>
      <td>$5.95</td>
      <td>22%</td>
      <td>Jun 26, 2004 7:22 AM</td>
    </tr>
    <tr>
      <td>Aaron</td>
      <td>Johnson</td>
      <td>Yuma</td>
      <td>12</td>
      <td>$2.99</td>
      <td>5%</td>
      <td>Aug 21, 2009 12:21 PM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Henry Jr</td>
      <td>Tampa</td>
      <td>51</td>
      <td>$42.29</td>
      <td>18%</td>
      <td>Oct 13, 2000 1:15 PM</td>
    </tr>
    <tr>
      <td>Denni</td>
      <td>Henry</td>
      <td>New York</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>Boston</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent Sr</td>
      <td>Los Angeles</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>
        Kent Esq
        <table class="tablesorter-grey">
          <thead>
            <tr>
  ...

CSS

/*
 * Demo using the css/high-specificity/theme.blue.specific.css file
 * for the high specificity selector targeting the outer table which
 * is needed to prevent interefering with nested table styling.
 */

JavaScript

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

	$("table").tablesorter({
    // grey theme needs an <i> (icon) element
  	headerTemplate: '{content}{icon}',
    widgets: ["zebra", "filter"]
  });

});