Sort Data Table

Andrew Berry Aug 16, 2001

Click on the column headings to sort the information in the table. IE 5+ only.

ID	NAME	DATE	PHONE	WORKFLOW
1	Andy Berry	4/9/72	763-555-1212	REVIEW
2	Dan Developer	9/3/63	215-555-1400	SAME
3	John Javascript	3/4/71	612-555-0987	REVIEW
4	Jerry JSPage	8/2/71	215-555-7654	SAME
5	Mary Mainframe	3/28/70	763-555-8295	REVIEW
6	Elaine Ecommerce	2/28/29	612-555-1338	REVIEW
7	John Smith	12/31/00	610-555-0987	SAME
8	Candy Coder	4/1/70	000-555-9099	SAME
9	Pippy Long Stocking	1/1/30	613-555-1338	DIFFERENT
10	111222	2/2/01	345-555-7654	DIFFERENT
11	Apple Man	3/13/74	215-555-4043	DIFFERENT

The JavaScript Source: Forms: Sort Data Table

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL SORT DATA TABLE:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

</script>

</HEAD>

<BODY>

<TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=5>
	<TR bgcolor=mediumblue>
		<TD><A href="javascript:sortTable(0, rsTable);">ID</A></TD>
		<TD><A href="javascript:sortTable(1, rsTable);">NAME</A></TD>
		<TD><A href="javascript:sortTable(2, rsTable);">DATE</A></TD>
		<TD><A href="javascript:sortTable(3, rsTable);">PHONE</A></TD>
		<TD><A href="javascript:sortTable(4, rsTable);">WORKFLOW</A></TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>Andy Berry</TD>
		<TD>4/9/72</TD>
		<TD>763-555-1212</TD>
		<TD>REVIEW</TD>
	</TR>
	<TR>
		<TD>2</TD>
		<TD>Dan Developer</TD>
		<TD>9/3/63</TD>
		<TD>215-555-1400</TD>
		<TD>SAME</TD>
	</TR>
	<TR>
		<TD>3</TD>
		<TD>John Javascript</TD>
		<TD>3/4/71</TD>
		<TD>612-555-0987</TD>
		<TD>REVIEW</TD>
	</TR>
	<TR>
		<TD>4</TD>
		<TD>Jerry JSPage</TD>
		<TD>8/2/71</TD>
		<TD>215-555-7654</TD>
		<TD>SAME</TD>
	</TR>
	<TR>
		<TD>5</TD>
		<TD>Mary Mainframe</TD>
		<TD>3/28/70</TD>
		<TD>763-555-8295</TD>
		<TD>REVIEW</TD>
	</TR>
	<TR>
		<TD>6</TD>
		<TD>Elaine Ecommerce</TD>
		<TD>2/28/29</TD>
		<TD>612-555-1338</TD>
		<TD>REVIEW</TD>
	</TR>
	<TR>
		<TD>7</TD>
		<TD>John Smith</TD>
		<TD>12/31/00</TD>
		<TD>610-555-0987</TD>
		<TD>SAME</TD>
	</TR>
		<TR>
		<TD>8</TD>
		<TD>Candy Coder</TD>
		<TD>4/1/70</TD>
		<TD>000-555-9099</TD>
		<TD>SAME</TD>
	</TR>
		<TR>
		<TD>9</TD>
		<TD>Pippy Long Stocking</TD>
		<TD>1/1/30</TD>
		<TD>613-555-1338</TD>
		<TD>DIFFERENT</TD>
	</TR>
		<TR>
		<TD>10</TD>
		<TD>111222</TD>
		<TD>2/2/01</TD>
		<TD>345-555-7654</TD>
		<TD>DIFFERENT</TD>
	</TR>
		<TR>
		<TD>11</TD>
		<TD>Apple Man</TD>
		<TD>3/13/74</TD>
		<TD>215-555-4043</TD>
		<TD>DIFFERENT</TD>
	</TR>
</TABLE>

<center>
Free JavaScripts provided 
by <a href="http://javascriptsource.com">The JavaScript Source</a>
</center>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(1 comment)

I can't thank you enough for publishing this code on the internet! Thank you, thank you, thank you! I am currently "writing" it further to suit our needs. Thank goodness there's people like you out there who are willing to share![br /][br /]Elizabeth

Elizabeth Nov 22, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Sort Data Table

Leave a Response

Attention JavaScript Coders

Go Deeper