Kainaw's Data Table

Data tables look nice on the Internet, but they aren't very functional. This will add sort functionality to a table of data. Clicking on the header will sort the data by the column below the header clicked on. Clicking a header twice will reverse the sort order.

Download

Click here to download the data table script. The instructions for use are in the script file.

Example

This is an example of the script in action. To sort the table, click on the header for each column.

ID	Last	First
1	Simpson	Homer
2	Simpson	Bart
3	Fry	Philip
4	Griffin	Peter

The HTML

The following HTML is how the example was produced. The text in red is what was added to the normal HTML. (The CSS styles which make the header blue and highlights yellow are not included.)

	<script language='javascript' src='kdt.js'></script>
	<table>
	<thead>
		<tr>
		<th onclick='kdt_resort(this);'>ID</th>
		<th onclick='kdt_resort(this);'>Last</th>

		<th onclick='kdt_resort(this);'>First</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>Simpson</td><td>Homer</td></tr>

		<tr><td>2</td><td>Simpson</td><td>Bart</td></tr>
		<tr><td>3</td><td>Fry</td><td>Philip</td></tr>

		<tr><td>4</td><td>Griffin</td><td>Peter</td></tr>
	</tbody>
	</table>