CodeProject: Sorting HTML Tables using Javascript. Free source code and programming help

Report Article

Discuss

Send to a friend

60 votes for this Article.

Popularity: 7.47 Rating: 4.20 out of 5

Download source files - 8 Kb

demo image

Introduction

This JavaScript code can be used to convert tables in ordinary HTML into sortable ones by associating each title column with an onClick event to automatically sort the data rows.

No additional coding is necessary. All you need to do is give your table an ID field, include the sortTable.js file and call initTable in your document's onLoad method.

<HTML>
<HEAD>
<TITLE>Sample Table</TITLE>
</HEAD>
<BODY onLoad='initTable("table0");'>

<SCRIPT SRC="sortTable.js"></SCRIPT>

<TABLE ID="table0" BORDER=1>
	<TBODY>
	<TR><TD ROWSPAN=2>NO</TD><TD COLSPAN=2>IDS</TD><TD ROWSPAN=2>Date</TD></TR>
	<TR><TD>ID</TD><TD>Device ID</TD></TR>
	<TR><TD COLSPAN=4> </TD></TR>
	<TR><TD COLSPAN=3> </TD><TD> </TD></TR>
	<TR><TD>1</TD><TD>k</TD><TD>00030</TD><TD>11/09/01 12:14:00 pm</TD></TR>
	<TR><TD>2</TD><TD>c</TD><TD>00006</TD><TD>11/11/01 12:15:00 pm</TD></TR>
	<TR><TD>3</TD><TD>a</TD><TD>00016</TD><TD>10/16/01 08:14:00 am</TD></TR>
	<TR><TD>4</TD><TD>b</TD><TD>00031</TD><TD>09/05/01 10:05:00 am</TD></TR>
</TABLE>

History

27 Nov 2001 - updated source

3 Dec 2001 - updated source to include better comments. Also changed the main engine so that the data rows with various properties can be swapped as a whole. This change makes the script more flexible

6 Dec 2001 - The script now uses delete/insertCell for all the cell manipulation. So, what does this mean? Well, it's really flexible now. It should retain all the cell properties even when the script gets applied, including those of the title cells.

18 Dec 2001 - Fixed a few more bugs and improved the script so that it can handle different types of title cells.

23 Jan 2002 - Updated source files

15 Mar 2002

Automatic sort upon page load
Handling of <THEAD> <TFOOT> tags

5 Apr 2002

The script now preserves most common cell properties.
Bug fix in isDate method.

10 Apr 2002

Title rows can now be in a separate table
CSS preserved for cells
Bug fix in the status caption
Title link events now propagated to the entire cells

25 Apr 2002

Removes HTML tags when comparing cell content

25 July 2002:

Handles Euro date format
Fixed up/down replacement reg exp
Title column hints (via TITLE) added
Changed up/down char to up/down arrows
Up/down arrows get displayed if doSortUponLoad is set
Added a new feature to allow skipping columns when sorting
Title cells can be highlighted (bgcolor chaged) onMouseOver ...

25 Sep 2002:

Mouse pointer becomes hourglass while sorting
Bug fix where sorting is mistakenly done twice if doSortUponLoad is set
Sort direction alternates even between tables

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Han Yu

http://www.geocities.com/sc_hanyu/

Occupation:	Web Developer
Location:	United States

Other popular Client side scripting articles:

Handy XP Style Menu
This is a pretty menu in XP style. Easy to setup, highly customizable.
JavaScript For Beginners
A very easy tutorial for JavaScript beginners
JavaScript Virtual Keyboard
This article presents a Virtual Keyboard - an important addendum to the library of usability tools.
Auto-complete Control
Auto-complete control.
Observer Design Pattern Using JavaScript
Ensuring a crisp boundary exists between objects, enabling greater reuse and system maintainability.