Tablesorter

by Bianca Kuehweidner

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.tablesorter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.tablesorter.widgets.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/theme.default.min.css">
<div class="overflow">

  <table id="sortMe">
    <thead>
      <tr>
        <th>AlphaNumeric</th>
        <th>Numeric</th>
        <th>Animals</th>
        <th>Sites</th>
        <th>AlphaNumeric</th>
        <th>Numeric</th>
        <th>Animals</th>
        <th>Sites</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
      </tr>
      <tr>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
      </tr>
      <tr>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
      </tr>
      <tr>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
      </tr>
      <tr>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
      </tr>
      <tr>
        <td>abc 2</td>
        <td>56</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
        <td>abc 2</td>
        <td>56</td>
      ...

CSS

.overflow { 
  height: 200px;
  padding-right: 20px;
  overflow: auto;
  position: relative;
}

table {
  border-collapse: collapse;
}

table th,
table td { 
  padding: 5px;
  border: solid 1px #ccc;
}

JavaScript

$("#sortMe").tablesorter({
   widgets: ['stickyHeaders'],
   widgetOptions: {
       stickyHeaders_attachTo: $(".overflow")
   }
});