Tablesorter demo

All options included, as well as the uitheme widget

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>
<table class="tablesorter">
  <thead>
    <tr>
      <th class="sorter-grades">Grades</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>C</td></tr>
    <tr><td>B+</td></tr>
    <tr><td>C</td></tr>
    <tr><td>B</td></tr>
    <tr><td>D-</td></tr>
    <tr><td>C-</td></tr>
    <tr><td>D</td></tr>
    <tr><td>C+</td></tr>
    <tr><td>A+</td></tr>
    <tr><td>F</td></tr>
    <tr><td>C-</td></tr>
    <tr><td>D</td></tr>
    <tr><td>D+</td></tr>
    <tr><td>A</td></tr>
    <tr><td>B-</td></tr>
    <tr><td>A-</td></tr>
    <tr><td>A+</td></tr>
  </tbody>
</table>

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $.tablesorter.addParser({
    id: 'grades',
    is: function() {
      return false; // do not auto-detect this parser
    },
    format: function(s) {
      var grades = ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'],
        index = grades.indexOf(s.toUpperCase());
      return index > -1 ? index : s;
    },
    type: 'numeric'
  });

  $('table').tablesorter({
    theme: 'blue'
  });
});