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/widgets/widget-storage.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-resizable.js"></script>
<table class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th class="resizable-false">Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Student01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Student02</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>90</td>
            <td>88</td>
            <td>100</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Student03</td>
            <td>Languages</td>
            <td>female</td>
            <td>85</td>
            <td>95</td>
            <td>80</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Student04</td>
            <td>Languages</td>
            <td>male</td>
            <td>60</td>
            <td>55</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Student05</td>
            <td>Languages</td>
            <td>female</td>
            <td>68</td>
            <td>80</td>
            <td>95</td>
            <td>80</td>
        </tr>
        <tr>
   ...

CSS

th.tablesorter-header.resizable-false {
  background-color: #e6bf99;
}
/* ensure box-sizing is set to content-box,
 if using jQuery versions older than 1.8
*, *:before, *:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
*/

JavaScript

/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
$(function () {
    $('table').tablesorter({
		theme: 'blue',
		widgets: ['zebra', 'resizable'],
		widgetOptions: {
			// If this option is set to false, resized column
			// widths will not be saved. Previous saved values
            // will be restored on page reload
			resizable: true,
			// If this option is set to true, a resizing anchor
			// will be included in the last column of the table
			resizable_addLastColumn: false,
      // If this option is true, the resizable handle extends through the
      // entire height of the table footer (added v2.28.8)
      resizable_includeFooter: true,
			// Set this option to the starting & reset header widths
			resizable_widths: [ '20%', '20%', '60px', '95px', '95px', '95px', '95px' ],
			// Set this option to throttle the resizable events
			// set to true (5ms) or any number 0-10 range
			resizable_throttle: false,
      // Set this option to true and resizing a column will change the size of the
      // selected column, and the last column, not the selected column's neighbor.
      // When false, resizing a column will move the column border between
      // it's neighbors.
      resizable_targetLast : false
		}
	});
});