// =================================================================== // Author: Matt Kruse // WWW: http://www.mattkruse.com/ // // NOTICE: You may use this code for any purpose, commercial or // private, without any further permission from the author. You may // remove this notice from your final code if you wish, however it is // appreciated by the author if at least my web site address is kept. // // You may *NOT* re-distribute this code in any way except through its // use. That means, you can include it in your product, or your web // site, or any other form where the code is actually being used. You // may not put the plain javascript up on your site for download or // include it in your javascript libraries for download. Instead, // please just point to my URL to ensure the most up-to-date versions // of the files. Thanks. // =================================================================== /* sorttable.js Matt Kruse Last Modified: 6/14/00 (NOTE: SCRIPT tags are broken into two pieces in these comments so the browser doesn't interpret them) 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. Instructions for use in your HTML: Include the js file inside your HTML source: 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. Like this: Insert the style sheet types in your HTML source, inside : Define the table somewhere in your HTML file. Preferrably this will go in the 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 properties. Anything in this argument will be added to the 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: 032097 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(" 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 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!! 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 or t.WriteRows()

Name	ID	Bonus
tags - it creates them:

That's it! */ var use_css=false; var use_layers=false; if (document.all) { use_css = true; } if (document.layers) { use_layers = true; } var sort_object; var sort_column; var reverse=0; // Constructor for SortTable object function SortTable(name) { // Properties this.name = name; this.sortcolumn=""; this.dosort=true; this.tablecontainsforms=false; // Methods this.AddLine = AddLine; this.AddColumn = AddColumn; this.WriteRows = WriteRows; this.SortRows = SortRows; this.AddLineProperties = AddLineProperties; this.AddLineSortData = AddLineSortData; // Structure this.Columns = new Array(); this.Lines = new Array(); this.LineProperties = new Array(); } // Add a line to the grid function AddLine() { var index = this.Lines.length; this.Lines[index] = new Array(); for (var i=0; i of the last line added function AddLineProperties(prop) { var index = this.Lines.length-1; this.LineProperties[index] = prop; } // Define sorting data for the last line added function AddLineSortData() { var index = this.Lines.length-1; for (var i=0; i tag for this column (ex: BGCOLOR="red") // align= Alignment of data in cells // type = type of data in this column (numeric, money, etc) - default alphanumeric function AddColumn(name,td,align,type) { var index = this.Columns.length; this.Columns[index] = new Object; this.Columns[index].name = name; this.Columns[index].td = td; this.Columns[index].align=align; this.Columns[index].type = type; if (type == "form") { this.tablecontainsforms=true; if (use_layers) { this.dosort=false; } } } // Print out the original set of rows in the grid function WriteRows(from,max) { var open_div = ""; var close_div = ""; if (max <= 0 || max > this.Lines.length) max = this.Lines.length; if (from <1) from = 0; else from = from-1; for (var i=0; i"); for (var j=0; j"; close_div= ""; } if (use_layers) { // If the table contains form elements, don't use tags or the // form will be forced closed. if (!this.dosort) { if (this.Columns[j].align != '') { open_div=""; } } else { open_div = ""; open_div+= ""; if (this.Columns[j].align != '') { open_div+= ""; } } if (this.Columns[j].align != '') { close_div = ""; } if (this.dosort) { close_div += ""; } } document.write(""+open_div+this.Lines[i+from][j].text+close_div+""); } document.write(""); } } // Sort the table and re-write the results to the existing table function SortRows(table,column,max) { sort_object = table; if (!sort_object.dosort) { return; } if (sort_column == column) { reverse=1-reverse; } else { reverse=0; } sort_column = column; // Save all form column contents into a temporary object // This is a nasty hack to keep the current values of form elements intact if (table.tablecontainsforms) { var iname="1"; var tempcolumns = new Object(); for (var i=0; i parseFloat(b[column].data) ) { return 1; } return 0; } ); } else if (table.Columns[column].type == "money") { // Sort by Money table.Lines.sort( function by_name(a,b) { if (parseFloat(a[column].data.substring(1)) < parseFloat(b[column].data.substring(1)) ) { return -1; } if (parseFloat(a[column].data.substring(1)) > parseFloat(b[column].data.substring(1)) ) { return 1; } return 0; } ); } else if (table.Columns[column].type == "date") { // Sort by Date table.Lines.sort( function by_name(a,b) { if (Date.parse(a[column].data) < Date.parse(b[column].data) ) { return -1; } if (Date.parse(a[column].data) > Date.parse(b[column].data) ) { return 1; } return 0; } ); } else { // Sort by alphanumeric table.Lines.sort( function by_name(a,b) { if (a[column].data+"" < b[column].data+"") { return -1; } if (a[column].data+"" > b[column].data+"") { return 1; } return 0; } ); } if (reverse) { table.Lines.reverse(); } if (max <= 0 || max > this.Lines.length) max = this.Lines.length; for (var i=0; i"); } document.layers[cell_name].document.layers[cell_namex].document.write(table.Lines[i][j].text); if (table.Columns[j].align != '') { document.layers[cell_name].document.layers[cell_namex].document.write(""); } document.layers[cell_name].document.layers[cell_namex].document.close(); } } } }