Click here to Skip to main content
11,478,896 members (75,933 online)
Click here to Skip to main content

Sorting HTML Tables using Javascript

, 24 Sep 2002 497.9K 9.9K 73
Rate this:
Please Sign up or sign in to vote.
A simple method of making your HTML tables sortable. No additional coding necessary!
<!-- Download Links -->

demo image <!-- Main HTML starts here -->

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>&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

Share

About the Author

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

Comments and Discussions

 
Questionkeep 1 column unchanged Pin
Member 1083389421-May-14 1:06
memberMember 1083389421-May-14 1:06 
QuestionNot works when there are more than 100000 rows Pin
Ashish payghan18-Feb-14 1:07
memberAshish payghan18-Feb-14 1:07 
QuestionCSS formatting Disappear Pin
Member 1040717723-Dec-13 1:01
memberMember 1040717723-Dec-13 1:01 
QuestionThank you! Pin
Member 1022844423-Aug-13 11:27
memberMember 1022844423-Aug-13 11:27 
Questiononmouseover onclick onmouseout..... is not sorting Pin
Member 951037916-Oct-12 4:48
memberMember 951037916-Oct-12 4:48 
QuestionGreat Code Pin
muthuraman a14-Aug-12 21:28
membermuthuraman a14-Aug-12 21:28 
QuestionGreat Work Dude Pin
RavikumarR1-Jul-12 20:14
memberRavikumarR1-Jul-12 20:14 
Questioninclude the <a tag in XSL file Pin
Member 915222021-Jun-12 5:36
memberMember 915222021-Jun-12 5:36 
QuestionSort by Ascending or Descending Pin
RachelWoulf2-Aug-10 10:50
memberRachelWoulf2-Aug-10 10:50 
AnswerRe: Sort by Ascending or Descending Pin
rwoulf2-Aug-10 13:02
memberrwoulf2-Aug-10 13:02 
GeneralFinding rowindex of the Html table in javascript Pin
Rajeshgut13-Oct-09 5:20
memberRajeshgut13-Oct-09 5:20 
GeneralSorting by second word in a column. Pin
John Rogers24-Jun-08 16:50
memberJohn Rogers24-Jun-08 16:50 
Questionhelp....? Pin
bakfull soulie6-May-08 11:18
memberbakfull soulie6-May-08 11:18 
AnswerRe: help....? Pin
John Rogers24-Jun-08 16:46
memberJohn Rogers24-Jun-08 16:46 
Questionsetting columns to ignore Pin
alastarwaterwolf21-Aug-07 14:13
memberalastarwaterwolf21-Aug-07 14:13 
Questionforums Pin
viji2703198520-Aug-07 5:25
memberviji2703198520-Aug-07 5:25 
Generalgreat script Pin
rodsavestuff14-Feb-07 10:01
memberrodsavestuff14-Feb-07 10:01 
QuestionProblems with columns with select fields Pin
steffersonj14-Nov-06 5:42
membersteffersonj14-Nov-06 5:42 
Generalfixed header Pin
J51219826-Aug-06 22:29
memberJ51219826-Aug-06 22:29 
GeneralRe-initialization in conjunction with Filter Pin
ahooja28-Jun-06 7:12
memberahooja28-Jun-06 7:12 
GeneralProblem with empty cells Pin
siribudigi9-May-06 8:44
membersiribudigi9-May-06 8:44 
QuestionHow to sort on columns having checkbox ? Pin
CottonGear20-Oct-05 2:07
memberCottonGear20-Oct-05 2:07 
GeneralDate with format DD-MON-YY is not sorting properly Pin
dhan_raj14-Oct-05 2:10
memberdhan_raj14-Oct-05 2:10 
GeneralTry this script, its awesome Pin
S.A.S.18-Sep-05 23:16
memberS.A.S.18-Sep-05 23:16 
GeneralChanging the column that sorts Pin
CrystalB2515-Feb-05 10:45
memberCrystalB2515-Feb-05 10:45 
GeneralRe: Changing the column that sorts Pin
androidik18-Mar-05 4:55
memberandroidik18-Mar-05 4:55 
Generalwrong css class in firefox Pin
Laubi_9-Jan-05 4:22
memberLaubi_9-Jan-05 4:22 
Generalskip rows while sorting table. Great Effort Pin
sreepavanic18-Nov-04 5:11
membersreepavanic18-Nov-04 5:11 
GeneralFormatting Table and fields Pin
gareth135168498121-Apr-04 2:09
membergareth135168498121-Apr-04 2:09 
GeneralCells with a Link Pin
JoeStone21-Jan-04 9:20
memberJoeStone21-Jan-04 9:20 
GeneralSorting a table on XML page Pin
Anonymous26-Nov-03 10:27
sussAnonymous26-Nov-03 10:27 
GeneralAnother bug found!!! Pin
Zhuofei Wang18-Sep-03 16:47
memberZhuofei Wang18-Sep-03 16:47 
GeneralEmpty cells problem Pin
DrJ210-Aug-03 22:35
memberDrJ210-Aug-03 22:35 
GeneralVery Slow for large data Pin
amitsinha4-Aug-03 10:54
memberamitsinha4-Aug-03 10:54 
GeneralRe: Very Slow for large data Pin
Stephane Rodriguez.4-Aug-03 11:25
memberStephane Rodriguez.4-Aug-03 11:25 
GeneralRe: Very Slow for large data Pin
Qing Jiang24-Feb-04 5:53
memberQing Jiang24-Feb-04 5:53 
GeneralRe: Very Slow for large data Pin
Stephane Rodriguez.24-Feb-04 6:28
memberStephane Rodriguez.24-Feb-04 6:28 
GeneralRe: Very Slow for large data Pin
_web_24-Jun-05 13:52
member_web_24-Jun-05 13:52 
GeneralCells with links in data Pin
Dan Hogan12-Jun-03 13:15
memberDan Hogan12-Jun-03 13:15 
GeneralRe: Cells with links in data Pin
Julia Belonojko8-Jul-03 9:54
sussJulia Belonojko8-Jul-03 9:54 
GeneralRe: Cells with links in data Pin
Dan Hogan8-Jul-03 10:03
memberDan Hogan8-Jul-03 10:03 
QuestionRe: Cells with links in data Pin
ken50423-Nov-05 21:42
memberken50423-Nov-05 21:42 
GeneralSeparate table for titles Pin
ekempter20-May-03 8:49
memberekempter20-May-03 8:49 
GeneralRow properties Pin
Alexander Blood3-Dec-02 12:20
memberAlexander Blood3-Dec-02 12:20 
GeneralRe: Row properties Pin
Han Yu3-Dec-02 15:26
memberHan Yu3-Dec-02 15:26 
GeneralRe: Row properties Pin
Alexander Blood4-Dec-02 11:48
memberAlexander Blood4-Dec-02 11:48 
GeneralRe: Row properties Pin
netclectic14-Nov-03 2:07
sussnetclectic14-Nov-03 2:07 
GeneralRe: Row properties Pin
Alexander Blood14-Nov-03 5:28
memberAlexander Blood14-Nov-03 5:28 
GeneralRe: Row properties Pin
netclectic14-Nov-03 5:32
sussnetclectic14-Nov-03 5:32 
GeneralRe: Row properties Pin
Alexander Blood14-Nov-03 5:39
memberAlexander Blood14-Nov-03 5:39 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 25 Sep 2002
Article Copyright 2001 by Han Yu
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid