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>
<table class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</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>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

CSS

/*
 This css is part of the blue/style.css theme, shown as an example
 To work with the zebra widget, include the .odd and .even color definitions as well
 as definitions for the "primary", "secondary" and "tertiary" sorts.
*/
/* Column Widget - column sort colors */
table.tablesorter-blue td.primary,
table.tablesorter-blue tr.odd td.primary {
  background-color: #99b3e6;
}
table.tablesorter-blue tr.even td.primary {
  background-color: #c2d1f0;
}

table.tablesorter-blue td.secondary,
table.tablesorter-blue tr.odd td.secondary {
  background-color: #c2d1f0;
}
table.tablesorter-blue tr.even td.secondary {
  background-color: #d6e0f5;
}

table.tablesorter-blue td.tertiary,
table.tablesorter-blue tr.odd td.tertiary {
  background-color: #d6e0f5;
}
table.tablesorter-blue tr.even td.tertiary {
  background-color: #ebf0fa;
}

JavaScript

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

  // call the tablesorter plugin
  $("table").tablesorter({
    theme : 'blue',

    sortList : [[1,0],[2,0],[3,0]],

    // header layout template; {icon} needed for some themes
    headerTemplate : '{content}{icon}',

    // initialize zebra striping and column styling of the table
    widgets : ["zebra", "columns"],

    widgetOptions : {
      // change the default column class names
      // primary is the first column sorted, secondary is the second, etc
      columns : [ "primary", "secondary", "tertiary" ],
      // include thead when adding class names
      columns_thead : true,
      // include tfoot when adding class names
      columns_tfoot : true
    }

  });

});