Demo
parsed values within the columnDistance (feet & inches) |
Fractions |
---|---|
3' | 1½ |
11" | 22/12 |
5' | 3¼ |
3" | 5 ½ |
½" | 2¾ |
5' 11" | ¾ |
10' 11" | ⅛ |
10' 1" | 5/6 |
10' 4" | 11/16 |
5' 9" | ⅜ |
5 1/2' | 2 |
5' 3/4" | 2⅞ |
5' 5/8" | 3 ¾ |
5' 3 1/2" | 3 ⅛ |
10' 3⅛" | 3/7 |
10' 2⅜" | 3⅜ |
10' 3⅝" | 3 ½ |
10' 2⅞" | 3 ⅝ |
5' 3¼" | 2⅝ |
5 ' 2 ½ " | 2/3 |
10' 2¾" | 5 ⅝ |
5' 2 ½" | 5 ⅜ |
5' 2.5" | 5/16 |
5' 2 1/2" | 2 3/5 |
10 ' 1 " | 3 |
Page Header
<!-- blue theme stylesheet -->
<link rel="stylesheet" href="../css/theme.blue.css">
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- load feet-inch-fraction parser -->
<script src="../js/parsers/parser-feet-inch-fraction.js"></script>
Javascript
$(function() {
$('table').tablesorter({
theme: 'blue',
headers: {
0: { sorter: 'distance' },
1: { sorter: 'distance' }
},
widgets: ['zebra']
});
});
HTML
<table class="tablesorter">
<thead>
<tr>
<th>Distance (feet & inches)</th>
<th>Fractions</th>
</tr>
</thead>
<tbody>
<tr><td>3'</td><td>1½</td></tr>
<tr><td>11"</td><td>22/12</td></tr>
<tr><td>5'</td><td>3¼</td></tr>
<tr><td>3"</td><td>5 ½</td></tr>
<tr><td>½"</td><td>2¾</td></tr>
<tr><td>5' 11"</td><td>¾</td></tr>
<tr><td>10' 11"</td><td>⅛</td></tr>
<tr><td>10' 1"</td><td>5/6</td></tr>
<tr><td>10' 4"</td><td>11/16</td></tr>
<tr><td>5' 9"</td><td>⅜</td></tr>
<tr><td>5 1/2'</td><td>2</td></tr>
<tr><td>5' 3/4"</td><td>2⅞</td></tr>
<tr><td>5' 5/8"</td><td>3 ¾</td></tr>
<tr><td>5' 3 1/2"</td><td>3 ⅛</td></tr>
<tr><td>10' 3⅛"</td><td>3/7</td></tr>
<tr><td>10' 2⅜"</td><td>3⅜</td></tr>
<tr><td>10' 3⅝"</td><td>3 ½</td></tr>
<tr><td>10' 2⅞"</td><td>3 ⅝</td></tr>
<tr><td>5' 3¼"</td><td>2⅝</td></tr>
<tr><td>5 ' 2 ½ "</td><td>2/3</td></tr>
<tr><td>10' 2¾"</td><td>5 ⅝</td></tr>
<tr><td>5' 2 ½"</td><td>5 ⅜</td></tr>
<tr><td>5' 2.5"</td><td>5/16</td></tr>
<tr><td>5' 2 1/2"</td><td>2 3/5</td></tr>
<tr><td> 10 ' 1 "</td><td>3</td></tr>
</tbody>
</table>