Click here to Skip to main content
15,892,927 members
Search within:


Articles / Programming Languages / Javascript
 
Article

Sorting HTML Tables using Javascript

Rate me:
Please Sign up or sign in to vote.
4.68/5 (30 votes)
24 Sep 20022 min read 645.2K   11.4K   75   132
A simple method of making your HTML tables sortable. No additional coding necessary!

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
<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>&nbsp;</TD></TR>
	<TR><TD COLSPAN=3>&nbsp;</TD><TD>&nbsp;</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


Written By
Han Yu
Web Developer
United States United States
http://www.geocities.com/sc_hanyu/

Comments and Discussions

 
FirstPrevNext
GeneralRe: sorting problem for amount column Pin
metalmickey25-Oct-02 2:52
metalmickey25-Oct-02 2:52 
GeneralOther Links: Pin
Adrian Bacaianu17-Mar-02 21:12
Adrian Bacaianu17-Mar-02 21:12 
QuestionWhat about the "Complex Table Model"? Pin
cimofj211-Mar-02 1:39
cimofj211-Mar-02 1:39 
AnswerRe: What about the "Complex Table Model"? Pin
11-Mar-02 7:56
suss11-Mar-02 7:56 
GeneralRe: What about the "Complex Table Model"? Pin
cimofj212-Mar-02 1:46
cimofj212-Mar-02 1:46 
GeneralRe: What about the "Complex Table Model"? Pin
Han Yu12-Mar-02 6:37
Han Yu12-Mar-02 6:37 
GeneralHelp With Dates Pin
Wandrag7-Jan-02 1:36
Wandrag7-Jan-02 1:36 
GeneralRe: Help With Dates Pin
7-Jan-02 7:51
suss7-Jan-02 7:51 
Hi,

The sorting routine uses the literal string ... so the date data won't work Smile | :) ... In order to make it work, you will need to make some changes to the code. Here is one of the ways.

Look at the function "compare". As you may notice, the function is used to compare 2 inputs (i.e. a, b) and returns which one should is "bigger" (in sorting sense). I tried to take care of simple number inputs and strings (see the if statements with isNaN etc). You can write a few lines of code to handle date types. Javascript has Date objects which you can use to compare (<, >, = operators), so all you need to do is to:

1. First find out whether the inputs (a, b) are date types
2. If they are date types, create Date objects
3. Then, do the compare and return the results

There may be many ways to do this, but I'd probably modify the lines:

if (aToBeCompared < bToBeCompared) ...

to be something like:

if (isDate(a) && isDate(b)) // note you need to define isDate
{
// I HAVE NOT TESTED THIS CODE !!!
// convert a, b to date objects
Date aDate(a);
Date bDate(b);
// compare using date objects comparison operators
if (aDate < bDate)
if (!descending)
return -1;
else
return 1;
else if (aDate > bDate)
if (!descending)
return 1;
else
return -1;
return 0;
}
else
{
if (aToBeCompared < bToBeCompared) ...

no changes here ...
...
...
}

Hope this helps ... the most difficult is probably writing isDate as you need to account for all sorts of date format inputs. It may be sufficient to use Date constructor to see if it's in date format that Javascript recognizes. isDate is a function that determines whether a string input is in date format or not. It returns true if it's a date format, false otherwise. There may already be such function in Javascript Smile | :)

- Han
GeneralRe: Help With Dates Pin
Wandrag7-Jan-02 22:12
Wandrag7-Jan-02 22:12 
GeneralRe: Help With Dates Pin
Han Yu31-Mar-02 11:32
Han Yu31-Mar-02 11:32 
GeneralRe: Help With Dates Pin
John Rogers3-Sep-02 19:20
John Rogers3-Sep-02 19:20 
QuestionNot for IE6? Pin
24-Dec-01 20:14
suss24-Dec-01 20:14 
AnswerRe: Not for IE6? Pin
27-Dec-01 10:08
suss27-Dec-01 10:08 
GeneralCool! Pin
7-Dec-01 9:20
suss7-Dec-01 9:20 
GeneralRe: Cool! Pin
10-Dec-01 15:34
suss10-Dec-01 15:34 
GeneralRe: Cool! Pin
Anonymous18-Jul-02 8:28
Anonymous18-Jul-02 8:28 
GeneralRe: Cool! Pin
Han Yu18-Jul-02 22:53
Han Yu18-Jul-02 22:53 
QuestionAdd <tr> sorting? Pin
Joe Scheer6-Dec-01 10:53
Joe Scheer6-Dec-01 10:53 
AnswerRe: Add <tr> sorting? Pin
10-Dec-01 15:26
suss10-Dec-01 15:26 
GeneralFundamental question Pin
Darren Schroeder4-Dec-01 16:01
Darren Schroeder4-Dec-01 16:01 
GeneralRe: Fundamental question Pin
10-Dec-01 15:31
suss10-Dec-01 15:31 
Generalbug found Pin
28-Nov-01 8:53
suss28-Nov-01 8:53 
GeneralRe: bug found Pin
28-Nov-01 9:04
suss28-Nov-01 9:04 
GeneralRe: bug found Pin
17-Apr-02 3:15
suss17-Apr-02 3:15 
GeneralCode seems to be IE5-specific... Pin
26-Nov-01 7:09
suss26-Nov-01 7:09 
Last Visit: 31-Dec-99 18:00     Last Update: 6-May-24 22:57Refreshᐊ Prev123456 Next ᐅ

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 24 Nov 2001

Article Copyright 2001 by Han Yu
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1