Skip to content

Instantly share code, notes, and snippets.

@danielbrinneman

danielbrinneman/sortable-table.html

Last active May 4, 2017 05:24
Show Gist options
  • Save danielbrinneman/5aca6001537b47cbc73eb0124d5d8d86 to your computer and use it in GitHub Desktop.
Save danielbrinneman/5aca6001537b47cbc73eb0124d5d8d86 to your computer and use it in GitHub Desktop.
Download ZIP
I created this to replicate the staff list on a website but only use one page and add one more column for the department that would have a non-sortable table followed by a sortable table.
Raw
sortable-table.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Directory Table</title>
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.tablesorter.min.js"></script>
<style>table,td,th{font:13px/18px verdana,arial,sans-serif;border:1px solid #ddd;border-collapse:collapse}th{background-color:#00718F;color:#ffffff;font-weight:bold}</style>
<script type="text/javascript">
$(document).ready(function () {
$("#sorttable").tablesorter();
});
</script>
</head>
<style type="text/css">
tr { height: 25px; }
td:first-child { width: 407px; } /* Contact */
td:first-child + td { width: 69px; text-align: center; } /* Extension */
td:first-child + td + td { width: 133px; text-align: center; } /* Direct Line */
td:first-child + td + td + td { width: 133px; text-align: center; } /* Department */
</style>
<body>
<h2>Staff</h2>
<table cellSpacing="0" cellPadding="2" background="" border="1" x:str="">
<thead>
<tr >
<th>Contact</th>
<th>Extension</th>
<th>Direct Line</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr height="25">
<td><a href="mailto:[email protected]">Office</a></td>
<td>1</td>
<td >803-</td>
<td>General</td>
</tr>
<tr height="25">
<td><a href="mailto:[email protected]">Maintenance</a></td>
<td>10</td>
<td>803-</td>
<td>Maintenance</td>
</tr>
<tr height="25">
<td>EMT</td>
<td>93</td>
<td>803-</td>
<td>Emergency</td>
</tr>
</tbody>
</table>
<br /><br />
<table cellSpacing="0" cellPadding="2" background="" border="1" x:str="" id="sorttable">
<thead>
<tr >
<th>Contact</th>
<th>Extension</th>
<th>Direct Line</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr height="25">
<td>Baseball</td>
<td>83</td>
<td>803-</td>
<td>Sports</td>
</tr>
<tr height="25">
<td>Basketball<a href="mailto:[email protected]">John Doe</a></td>
<td>8</td>
<td>803-</td>
<td>Sports</td>
</tr>
<tr height="25">
<td>Float</td>
<td>45</td>
<td>803-</td>
<td>Boats</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment