JavascriptToolbox.com Now Available!

Almost all of my javascript code has been moved over to its new home at The Javascript Toolbox. Please go there to find the latest scripts, information, etc. These pages will remain here for a while for historical purposes in case anyone needs a production copy of old code.

Sortable Table

[Toolbox] [Example] [Source] [Documentation]

This javascript creates a table with client-side data sorting. It works in 4.x or higher browsers. In IE, it uses CSS and in Netscape it uses Layers.

Include the js file inside your HTML source

<SCRIPT LANGUAGE="JAVASCRIPT" SRC="sorttable.js"></SCRIPT>

Due to a Netscape browser bug, if the page you are using this on is inside a frameset, you may need to include an empty SCRIPT tag before the included file.

<SCRIPT></SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT" SRC="sorttable.js"></SCRIPT>

Insert the style sheet types in your HTML source, inside <HEAD></HEAD>

<STYLE type=text/css>
.rel {POSITION: relative; width:100%;}
.abs {POSITION: absolute; width:100%;}
.right { text-align:right; }
.left { text-align:left; }
.center { text-align:center; }
</STYLE>

Define the table somewhere in your HTML file. Preferrably this will go in the <HEAD> of your document, but it may also be included in-line.

var t = new SortTable("t");

This creates a new SortTable object. You must pass the function an argument of the name of the object you are creating. For example...

var mytable = new SortTable("mytable");

Now define the columns of your table.

t.AddColumn("Name","","left","");
t.AddColumn("ID","","center","numeric");
t.AddColumn("Bonus","BGCOLOR=ffffcc","right","money");

The first argument is the name of the column, which you can use when sorting. The second argument is the <TD> properties. Anything in this argument will be added to the <TD> for each element in this column.

The third argument is the alignment of this column. left, center, right. (default left) The last argument is the data type of the column. This is used for sorting. More data types may be defined manually. The default data type for sorting is alphanumeric. Accepted types are:

numeric : float data
form : If this columns contains form elements, you must use this type! (this will cause the table to be non-sortable in Netscape)
date : Date data must be in a format understood by Date.parse()!

Now populate the table.

t.AddLine("John Doe",12345,"$500.00");

This adds a row of data to the table.

Sometimes, the table cell will contain text other than the actual data. For example, if your cells contain a "Work Order Number" like '032097' that are inside of a link, your table cell would contain:

<a href="whatever">032097</a>

Sorting based on this text data does not give the correct results, however. Instead, you want to sort based on just the number itself - 032097. For this, you need to define the sort data separately from the cell contents. To continue with the above example, let's say that "John Doe" is actually a link to his home page. Your AddLine would look like this:

t.AddLine("<a href='http://www.johndoe.com/',12345,"$500.00");

To correctly sort the first column by only his name, you would then add this command immediately after the AddLine() command:

t.AddLineSortData("John Doe",'','');

When blank entries are left for the sort data, the text data entered with AddLine() is used for the sorting.

You have one more option for the line of data you just entered. You may include a string that will be included in the <TR> for this line of the table. You can then include a background color for the row, for example. NOTE: This applies to the row number, and does NOT move when the rows are sorted. For example, if you put a red background in a row, and then re-sort the table, the red background will not move. The syntax for adding an argument to the row's <TR> is:

t.AddLineProperties(text);

For example:

t.AddLineProperties("align=center bgcolor=#F6F6F6");

This will center the whole row and give it a light gray background color. This option is mostly useful for giving every other row a different background color to make reading easier.

You are now done defining the data of your table. To put the table into your HTML, you must manually define the table itself. In order for Netscape to properly show cells of different lengths, a width of the table MUST be specified!!

<table border=1 width=600>
<tr>
<th><a href="javascript:SortRows(t,0)">Name</a></th>
<th><a href="javascript:SortRows(t,1)">ID</a></th>
<th><a href="javascript:SortRows(t,2)">Bonus</a></th>

The links are to the SortRows() function. This will sort and re-populate the table. It will be most common to call this function when a user clicks a table header, but you could actually call this function to sort from anywhere in the page. The sort function requires the table name and column number (starting with index 0) as arguments.

Note: If SortRows() is called on the same row as the last sort, it will inverse the order of the last sort.

Now, as the body of your table, simply call the WriteRows() method of the table to output the data in its original order. Do not wrap the WriteRows() call around <TR> or <TD> tags - it creates them:

</tr>
<SCRIPT>t.WriteRows()</SCRIPT>
</table>

That's it!