Sorting HTML Tables using Javascript

Han Yu, 24 Sep 2002

Rate this:

Please Sign up or sign in to vote.

A simple method of making your HTML tables sortable. No additional coding necessary!

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

About the Author

Han Yu

Web Developer
United States

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

You may also be interested in...

Choosing the Right Charting Component for Your Enterprise Product

Comments and Discussions

keep 1 column unchanged

Member 10833894

21-May-14 0:06

Hi,

Is there a way to keep 1 column unchanged?
If i want to have column 1 to show the ranking from 1 to 10, and the rest of the table to change?

Basically, want i am trying to do is create a table, where there's 1 row that is counting up.
When the count is higher then the 1 above, it has to jump up a row (so sorted) and be ranked higher on the list (so from 3th to 2nd place for example)

I would need it to ignore the first column, and filter onload on the 3th column.

Not works when there are more than 100000 rows

Ashish payghan

18-Feb-14 0:07

Hi, I have record of more than 100000 rows when I use this code my program get hange. Any suggestion?

CSS formatting Disappear

Member 10407177

23-Dec-13 0:01

I have CSS formatting to my table, but when I add the sorting the formatting disappear. Some of my javascript codes also does not work anymore. Also made my table editable with contenteditable, but i can't do that as well, with the sort included. Why?

Thank you!

Member 10228444

23-Aug-13 10:27

Very useful code, thanks for sharing.

onmouseover onclick onmouseout..... is not sorting

Member 9510379

16-Oct-12 3:48

Hi,

my cell is as shown below

< td bgcolor='#EEEEEE' >$name< /td >

after sorting this onmouseover onclick onmouseout values remains unsorted....

the data in the cells are sorting fine..

any help would be appreciated...

Great Code

muthuraman a

14-Aug-12 20:28

Great Code...

Great Work Dude

RavikumarR

1-Jul-12 19:14

Really its helpful for JScript Developers...

Ravikumar Raman

include the <a tag in XSL file

Member 9152220

21-Jun-12 4:36

I have following code and when link on the folder, I need to make sure when click the Fodler name it will go to the folder. This file is in the root folder.

Can someone please help?

<xsl&#58;stylesheet xmlns&#58;xsl=&#34;http&#58;//www.w3.org/1999/XSL/Transform&#34; version=&#34;1.0&#34;>
<xsl&#58;template match=&#34;/rss&#34;>
<html>
<head>
<title>RSS feed</title>
</head>
<body>
    <table width="100%" cellspacing="0">
        <tr><td><H1><center>Welcome</center></H1></td></tr>
        <tr><td><H2>Click on a column header to sort by each column.</H2></td></tr>
        <tr><td><DIV id="listing"><xsl:apply-templates match="NotesDocuments"/></DIV></td></tr>
 

 
    </table>
    </body>
</html>
</xsl&#58;template>
 
<xsl:template match="NotesDocuments">
    <table STYLE="background-color=beige">
    <thead>
    <td><DIV class="hd" onClick="sort('item no')">no</DIV></td>
    <td><DIV class="hd" onClick="sort(Name')">Name</DIV></td>
    <td><DIV class="hd" onClick="sort('folder')">folder</DIV></td>
 
    </thead>
 
    <xsl:for-each select="NotesData" order-by="TITLE">
 

 
    <tr>
    <td><DIV class="rw"><xsl:variable name="URL1"><xsl:value-of select="no"/></xsl:variable></DIV></td>
    <td><DIV class="rw"><xsl:variable name="URL2"><xsl:value-of select="Name"/></xsl:variable></DIV></td>
 
    <td>
    <div>
    <a href=&#34;{&URL1}_{&URL2}&#34;><xsl&#58;value-of select=&#34;Folder&#34;/></a>
 
</div></td>
 

 
    </tr>
    </xsl:for-each>
    </table>
 
</xsl&#58;stylesheet>

Sort by Ascending or Descending

RachelWoulf

2-Aug-10 9:50

Great code. How do I choose to sort by Ascending or Descending: i.e what variable do I need to change in the .js file?

Re: Sort by Ascending or Descending

rwoulf

2-Aug-10 12:02

s'ok found it:
sortDirArray[tableCount] = true; // sort descending - brill!

Finding rowindex of the Html table in javascript

Rajeshgut

13-Oct-09 4:20

Hi,

Please forgive if i place the query in wrong area..pls do the help for my problem..i am creating html table dynamically in javascript...i need to delete the row..for that i need row index. but i can't able to get it..Iam placing my code here..

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow+1;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
cellLeft.appendChild(el);

var cellRight = row.insertCell(1);
var btnnode = document.createElement('input');
btnnode.type='button';
btnnode.id = iteration;
btnnode.value ='Del';
btnnode.setAttribute('onclick','removeRowFromTable('+btnnode.id+')');
cellRight.appendChild(btnnode);

}

function removeRowFromTable(index)
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
for(var i=0; i< lastRow;i++)
{
if (tbl.rows[i].cells[1].childnodes[0].id == index)
tbl.deleteRow(i);
}
}

<table id="tblSample">
<tr>
<td><input type="text" name="txtRow1" id="txtRow1" size="40" />
</td>
<td><input type="button" name="btnrow1" id="btnrow1" value="Add" onclick="addRowToTable();" /> </td>
</tr>
</table>

Iam getting problem in the following line

if (tbl.rows[i].cells[1].childnodes[0].id .....

it shows exception as null value or object not exist...

What i have to do ..Pls tell me..

Thanks in advance

Raj

Sorting by second word in a column.

John Rogers

24-Jun-08 15:50

Does anyone know if it is possible to sort a column by the second word in the column? This would be useful in the case of sorting by last name.

John Rogers
www.cerberus.com.au

help....?

bakfull soulie

6-May-08 10:18

so.. I'm a noob trying to make my site function - no luck yet.

"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."

was hoping to get this to sort my tables for ppl visiting. downloaded the file, put it in my folder (where all my html stuff is) and copied the codes on this page.. Nothing happened.

so.. how to give my table an ID field?
then.. how to include the sortTable.js?
and.. what is my document's onLoad method?

ty Smile | :)

Re: help....?

John Rogers

24-Jun-08 15:46

In the table html code include ID="table0"

Include the following in the head of your page

<script>
//Sortable table script- Han Yu [email protected]
//Script featured on http://www.javascriptkit.com
var domok=document.all||document.getElementById
if (domok)
document.write('<SCRIPT SRC="sortTable.js"><\/SCRIPT>')
</script>

As I use other scripts on the same page I find the best way to call the script is by adding the following at the bottom of the page just before

<img src="off.gif" width="1" height="1" border="0" onLoad='if (domok) initTable("table0")'>

To use this method you will need a gif image named off.gif. This is a one pixel image that is so small that it is not seen.

John Rogers
www.cerberus.com.au

setting columns to ignore

alastarwaterwolf

21-Aug-07 13:13

how do you go about setting a column to ignore? I have one column that I don't want to be sorted at all, how do I do that? Thanks in advance!

forums

viji27031985

20-Aug-07 4:25

hi everybody.........
im a beginner in IT field.. in my company now my module is to create a forum.. i have no more idea in this.. if anybody know this..... plz share it to me....
im waiting for your reply

how to create forums using javascript and html

great script

rodsavestuff

14-Feb-07 9:01

Just a comments:
This script works great. Had some simple tables that I needed a way to sort (writing differnt sql's was going to be a pain)

Thanks!

Rod Smile | :)

Problems with columns with select fields

steffersonj

14-Nov-06 4:42

I tryed to set the "colsToIgnore" but it never match the <select>. How can I disable the script for the columns I specify?

Thank you for your time

JS

Great code and very clever idea. My problem is that I have a drop down inside a columns that I don't want to execute the script when I click, like:
Id	<select ><option value="1">users</option><option value="2">users</option></select>	country

fixed header

J5121982

6-Aug-06 21:29

can any one help me how to set fixed header in table with scroll hich work both in ie and mozilla

JAYARAJ

Re-initialization in conjunction with Filter

ahooja

28-Jun-06 6:12

Hi,

First and foremost - Great script!!!

I had quick question about your script.

I am using your sort script along with another filter script. Everytime the table is filtered - the table would need to be reinitialized by the init function in your script so it can set up for the new filtered table.

Likewise...inside the method that is called everytime a heading is clicked...I call the init function similarly like I do in the header.

initTable(document.getElementById('tb1'));

The end result is a sorted table, of as many rows as teh filtered tables...but sorted from all the rows of the entire table rather than just the filtered rows.

I believe the problem is the table is not getting properly initialized. What can I do to start fresh with the table everytime I filter? So it recalculates everything just the way it is?

A response would really help I've been stuck on this for quite some time...

Thanks!

Akshay

ahooja

Problem with empty cells

siribudigi

9-May-06 7:44

Hi,
I am using this javascript in my application, it is excellent. But I do have some empty cells in the integer field, its not sorting it properly.
Please advice?

Thanks,
YS

How to sort on columns having checkbox ?

CottonGear

20-Oct-05 1:07

Hello,
First of all thanks for such a great javascript that has helped me so much.
Its firfectly working fine except for the column with checkbox.
I have a grid which displays a column containing checkbox along with other columns. This check box can be checked or unchecked. How do I sort on this column (so that all checked ones are shown on top for ascending ) ?

Thanks in advance,
CG

Date with format DD-MON-YY is not sorting properly

dhan_raj

14-Oct-05 1:10

Hi,
This script is pretty useful to us in letting us sort the tables quite quickly. So, thanks for this.
However, in our application we use a date format
(DD-MON-YY for example, 01-JAN-05).
This script is not sorting this date.
Could you let me know is there any changes I can do to this script which will sort dates in the above format.

Thanks in advance.

Dhanraj.

Try this script, its awesome

S.A.S.

18-Sep-05 22:16

Very simple and clean usage:

http://www.kryogenix.org/code/browser/sorttable/[^]

Changing the column that sorts

CrystalB25

15-Feb-05 9:45

How would I go about changing the table that the data is sorted by?

<TABLE ID="table0" align="center">
     <TBODY>
     <TR><TD>Name</TD><TD>City</TD><TD>Genre</TD><TD>Links</TD></TR>
     <tr><td valign="top">Rotoscope</td><td valign="top">Arlington, VA</td><td valign="top">Pop</td><td valign="top"><a href="http://www.myspace.com/rotoscope" target="_blank">on myspace</a><br><a href="http://www.rotoscope.com" target="_blank">on the web</a></td></tr>
            <tr bgcolor="#CCCCCC"><td valign="top">Waking State</td><td valign="top">Washington, DC</td><td valign="top">Rock</td><td valign="top"><a href="http://www.myspace.com/wakingstate" target="_blank">on myspace</a><br><a href="http://www.wakingstate.net" target="_blank">on the web</a></td></tr>
</TABLE>

Right now it sorts by the first column (Name). I'd like to be able to switch it to be able to sort by the second column (City).

Also, would it be possible to make the table searchable by more then one column? Like either City or Genre depending on the users preference?

~Crystal

Re: Changing the column that sorts

androidik

18-Mar-05 3:55

To sort another column upon page load you should change defaultSortColumn variable in a script source.

wrong css class in firefox

Laubi_

9-Jan-05 3:22

Nice script! But I found a problem when using Firefox.

You're using getAttribute('className') to get the current cell style. This works fine with IE but when using Firefox/Mozilla you have to use 'class' instead 'className'..

skip rows while sorting table. Great Effort

sreepavanic

18-Nov-04 4:11

Hi I was looking for sort html table code which allows me to skip between rows in my Table.
This code works great in a sample html, but when i put it in my project, IE got hung. I tried by debugging the code, it actually goes till end of the code and gets hanged.
Can u please help me in this. Did anyone experience same sort of problem with this.

Thanks in Advance, Smile | :)

Pavani.

Formatting Table and fields

gareth1351684981

21-Apr-04 1:09

I am having trouble getting this to format as I wish it. It functions perfectly but I can't manage to set the column and table width i.e. 90% of page width and can't use line breaks.

Is there a way around this?

Cells with a Link

JoeStone

21-Jan-04 8:20

I am using the script dated 9/23/2002 4:41 PM.

The cells that have a link do not work correctly. The data displayed is fine, but the link info does not change.
Also, I am using style statements inside the TD and they do not function after a sort.

Does anyone have a fix or workaround?

Sorting a table on XML page

Anonymous

26-Nov-03 9:27

Hello,

Does this Javascript work on the XML web page? I saved an Excel file to a web page(XML format). The Sorting Javascript seems not work with the web page. Wink | ;)

Alan

For HK News, MP3, Shopping, Games & Horoscopes
http://www.USWebcity.com

Another bug found!!!

Zhuofei Wang

18-Sep-03 15:47

You could not put a row with COLSPAN at the end of table.If you do so, the table will not be init corretly.
For xample:
<TABLE ID="table2" border="1" >
     <TBODY>
     <TR><TH>ID</TH><TH>Device ID</TH><TH>Date</TH><TH>Comment</TH></TR>
     <TR><TD>k</TD><TD>00030</TD><TD>11/09/01 12:14:00 pm</TD><TD>1</TD></TR>
     <TR><TD>c</TD><TD>00006</TD><TD>11/11/01 12:15:00 pm</TD><TD>2</TD></TR>
     <TR><TD>a</TD><TD>00016</TD><TD>10/16/01 08:14:00 am</TD><TD>3</TD></TR>
     <TR><TD>b</TD><TD>00031</TD><TD>09/05/01 10:05:00 am</TD><TD>4</TD></TR>
     <tr><td colspan=4></td></tr> 
</TABLE>

It is taked from sample.htm with only one line added.
Cry | :((

I'm a student in China, and have been learning PC for 7 years. But till now, I'm still a learner.

Empty cells problem

DrJ2

10-Aug-03 21:35

Hi,

I'm using an older version of Han Yu's script, however the problem I seem to be facing is the fact that it has problems when there are empty cells in the collumn. For instance it will do something like this:

12
13
14

9
10

1
5
7

As you can see, the script restarts its sorting routine after the empty cell. What I want is to have the empty cells sorted at the top or bottom (doesn't really matter seeing you can resort the table the otherway).

Does somebody have a solution to this? (the newer version of the script is much to slow and doesn't fix this problem either).

Very Slow for large data

amitsinha

4-Aug-03 9:54

This script seems to be very slow when used with tables having more than 500 rows. I've used it with 600 rows and it took 3-4 mins to sort the table. My main purpose to use this script is to provide some client side scripting to avoid the database call for sorting but i'm kind of losing this purpose. Cry | :((

Please let me know if there is any solution to increase the speed.

Regards,
Amit

Amit

Re: Very Slow for large data

Stephane Rodriguez.

4-Aug-03 10:25

While Javascript can't be the solution anyway to sort large chunks of data, I would recommend to use the ActiveX TDC (tabular data control) which is part of Internet Explorer. The TDC provides a sort method which does all the required stuff.

-- modified at 10:35 Friday 14th October, 2005

Re: Very Slow for large data

Qing Jiang

24-Feb-04 4:53

Want to get solution for real world ( I mean large data ), use XML, XSLT and Javascript.
I will show you guys my code with big performance when I get time.

::Qing

Re: Very Slow for large data

Stephane Rodriguez.

24-Feb-04 5:28

I wonder how interpreted languages like XSLT and Javascript in addition to the verbosity of xml are going to provide a performant sorting? This is just insane! Feel free to write an article. Smile | :)

The ActiveX TDC, that I suggest in the original post, is a full-fledged C++ code that performs sorting among other things. As you might guess, it implements highly performant sorting. Unfortunately, once the table is sorted, the data have to be redisplayed in the web page, and that's a weak point since it takes time.

That being said, real world client-side scenarios should never sort tables with more than 100 rows. Either the sorting code is performed by a rich client, C++ code for instance, and it will be ok. Or the client-side has to use paging in one way on another, and just sort a chunk of data. Again, sorting large chunks of data with client-side scripting (javascript, ...) is irrelevant.

-- modified at 9:22 Saturday 8th October, 2005

Re: Very Slow for large data

_web_

24-Jun-05 12:52

hi Qing,

did you get a chance to put together the code you mention in your post. Would love to see what you came up with.

W

Cells with links in data

Dan Hogan

12-Jun-03 12:15

But when I sort on a different column, here's an example of what happens (to the above):

In other words, the rendered HTML gets sorted correctly, but the embedded HTML does not -- it remains as it was. Is there any way around this problem?

Thanks in advance for your help.

Fantastic script, by the way!

I have a table with cells that contain HTML links in the data. For example, one cell might look like this: <a href="edit.asp?id=1">1</a> <a href="edit.asp?id=1">3</a>

Re: Cells with links in data

Julia Belonojko

8-Jul-03 8:54

I have the exact same problem!!!

Re: Cells with links in data

Dan Hogan

8-Jul-03 9:03

Actually, I somehow was able to solve the problem by upgrading to the latest version of sorttable.js at http://www.codeproject.com/jscript/sortTable/sortTable.zip

Seems like this may have been an earlier bug that has since been fixed.

Hope this helps!

Re: Cells with links in data

ken504

23-Nov-05 20:42

Hello,
Thank you for your great script.
I just download the script. However, I also got the link data problem.
Can I have the latest script??
Thank you
Regards
Ken Smile | :)

Separate table for titles

ekempter

20-May-03 7:49

I get the impression from reading the documentation at the beginning of the script that I can use a separate table for titles (column headers). This would be great since my current table has a row for column titles, a row of column drop down boxes for filtering and the rest are data rows. Using the script as is causes the dropdown boxes to sort with the data rows. Ideally, I would like the script to ignore the second row that contains the dropdowns but if I can move the column titles and drop downs to a separate table, I think I can resolve the problem. Is anyone currently using a separate title table? Thanks in advance for any assistance.

Row properties

Alexander Blood

3-Dec-02 11:20

I need a way to store the row tags properties and restore them when the sort is completed. Any ideas?

Thanks Smile | :)

Re: Row properties

Han Yu

3-Dec-02 14:26

Good question ... At the moment, I only delete/insert cells, so row properties are not reserved. It'd be a good addition to the script.

Sorry about that ...

Han

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

Re: Row properties

Alexander Blood

4-Dec-02 10:48

I am trying to mimic the way you moved the properties of the cell but with the rows:

I modified the initTable this way...:
....
....
....
          if (! doneftable && separateTitle && titleFound)
          {
               ctable = table;
               nRow = table.rows.length;
               i = 0;
               doneftable = true;
          }
          rowPropertyDataArray[actualNRow] = "";
          currentRow = ctable.rows[i];
          cRowContent = String(currentRow.innerHTML);
          for (var k=0; k<rowPropertyArray.length; k++)
          {
               if (k == 0)
                    cmd = "cRowSetting=" + "String(currentRow." + rowPropertyArray[k] + ");"
               else
                    cmd = "cRowSetting += cellPropDelimiter + " + "String(currentRow." + rowPropertyArray[k] + ");"
               eval(cmd);
          }

          rowDataArray[actualNRow] = cRowContent + recDelimiter + String(actualNRow);;
          rowPropertyDataArray[actualNRow] = cRowSetting;

          skipRow = false;
          // Skip if it's THEAD, TFOOT
          if (ctable.rows[i].parentNode != null)
          {
....
....
....

and I modified the sortTable this way:
....
....
     // Re-drawing the table
     rowCount = 0;
     for (var i=0; i<nRow; i++)
     {

          if (i > 0 && rowCount != 0) {
               rowContent = rowArray[rowCount].split(recDelimiter);
               rowIndex = rowContent[maxNCol];
               cellxProp=rowPropertyDataArray[rowIndex].split(cellPropDelimiter);
               xx="";
               for (var k=0; k<cellPropArray.length; k++)
               {
                    xx += "x.";
                    cmd = "table.rows[i]." + rowPropertyArray[k] + "=cellxProp[" + k + "];";
                    eval(cmd);
               }
               alert(xx);
          }
          if (! colSpanArray[i])
          {
               for (var j=0; j<maxNCol; j++)
               {
                    // Skips the columns if set to ignore
....
....

I think it should work but it does not.   Any ideas?

Re: Row properties

netclectic

14-Nov-03 1:07

did this go anywhere?

i currently need to find a solution for this so i'd be interested to know if you got it working.

cheers!

Re: Row properties

Alexander Blood

14-Nov-03 4:28

No i found another source for how to do it but it has sorting bugs.

Re: Row properties

netclectic

14-Nov-03 4:32

Oh well, thanks anyway.

I found this - http://webfx.eae.net/dhtml/sortabletable/sortabletable.html

Looks pretty good and it's free for non-commercial use.

Re: Row properties

Alexander Blood

14-Nov-03 4:39

That is the one that has problems sorting dates.