<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Table Sorter Proof of Concept</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='css.js'></script>
<script type='text/javascript' src='standardista-table-sorting.js'></script>
</head>
<body>
<table class='sortable'>
<thead>
<tr>
<td></td>
<th colspan='2'>Name</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Date</th>
<th>Forename</th>
<th>Surname</th>
<th>Number</th>
<th>Price</th>
<th>IP Address</th>
<th>Scientific</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<th class='numeric'>385</th>
<th class='numeric'>$160.91</th>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>21/01/2006</td>
<td>Neil</td>
<td>Crosby</td>
<td class='numeric'>123</td>
<td class='numeric'>$1.96</td>
<td>192.168.1.1</td>
<td>-12E2</td>
</tr>
<tr class='odd'>
<td>01/02/2006</td>
<td>Becca</td>
<td>Courtley</td>
<td class='numeric'>122</td>
<td class='numeric'>$23.95</td>
<td>192.167.2.1</td>
<td>12E2</td>
</tr>
<tr>
<td>17/11/2004</td>
<td>David</td>
<td>Freidman</td>
<td class='numeric'>048</td>
<td class='numeric'>$14.00</td>
<td>192.168.2.1</td>
<td>13e-2</td>
</tr>
<tr class='odd'>
<td>17/10/2004</td>
<td>Sylvia</td>
<td>Tyler</td>
<td class='numeric'>43</td>
<td class='numeric'>$104.00</td>
<td>192.168.2.17</td>
<td>12.1e2</td>
</tr>
<tr>
<td>17/11/2005</td>
<td>Carl</td>
<td>Conway</td>
<td class='numeric'>49</td>
<td class='numeric'>$17.00</td>
<td>192.168.02.13</td>
<td>12e3</td>
</tr>
</tbody>
</table>
<table class='sortable autostripe'>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<script>
for (var i=0; i < 100; i++) {
var number = Math.round(Math.random()*1000);
var day = (1 + Math.round(Math.random()*30));
if (day < 10) {
day = '0' + day;
}
var month = (1 + Math.round(Math.random()*11));
if (month < 10) {
month = '0' + month;
}
var year = (1990 + Math.round(Math.random()*16));
var pennies = (1 + Math.round(Math.random()*99));
if (pennies < 10) {
pennies = '0' + pennies;
}
var pounds = (1 + Math.round(Math.random()*1500));
var date = day + '/' + month + '/' + year;
document.write("<tr>");
document.write("<td>"+number+"</td>");
document.write("<td>"+date+"</td>");
document.write("<td>$"+pounds+'.'+pennies+"</td>");
document.write("<td>"+number+"</td>");
document.write("<td>"+date+"</td>");
document.write("<td>$"+pounds+'.'+pennies+"</td>");
document.write("<td>"+number+"</td>");
document.write("<td>"+date+"</td>");
document.write("</tr>");
}
</script>
</tbody>
</table>
</body>
</html>