Mortgage Calculator | Loan Calculator | Color Lines

Features:

For one of my projects I wrote simple javascript code that sorts table data. At some point I wanted to use the code for another website, so I've made it generic enough to suit different websites. Eventually I released the code under GPL. Since then I've made several enhancements to the code, and now the table sorting script has the following features:

• Automatically adds links to column names.
• Clicking on column name repeatedly switches sorting order to ascending, descending and unsorted (original order).
• Displays sorting order as an up or down arrow next to the column name. The arrow character can be optionally replaced with another character/string or an image.
• Sorts column data containing plain text, HTML text (HTML is stripped), integer numbers, floating-point numbers and dates.
• Multi-column sort: The script remembers what columns were selected before and their sorting order. When the script sorts the data in primary (currently selected) column and finds that two rows have the same column data, it uses data from previously selected columns to determine the sorting order of columns.
• Multi-table support: the script can sort data in any number of tables on the page.
• It is possible to specify initial sorting order.
• Optionally saves the sorting order into cookie(s), and automatically restores sorting order after the page is reloaded.
• Optionally applies zebra-striping to columns.

Example:

Current sorting order of the second table is stored in a cookie. If you refresh the page the table will have exactly the same sorting order as it had before refreshing. Also, the second table has custom sorting up/down characters.

City Name	City Information
	Area (km2)	Population (millions)
Mumbai	440	12.78
Karachi	3530	12.21
Delhi	1400	11.06
San Paulo	1520	10.84
Moscow	1081	10.38

US City	State	Population (millions)
New York	New York	8,274,527
Los Angeles	California	3,834,340
Chicago	Illinois	2,836,658
Houston	Texas	2,208,180
Phoenix	Arizona	1,552,259

How to use it:

1. Please download a file gs_sortable.js (see links below) - this is the only external javascript file that you will need. Put it somewhere on your web server. Do not link to original file on this server because:
   • You will be using my bandwidth, and I will not like it.
   • I may post updated version of the javascript file with the same name, and this may break your pages.
   • If somebody breaks into my server it'd be easy for them to modify the file and do some nasty things to your page, like getting user cookies for your domain, or redirecting all users from your page to some other page.
2. Add id="some_name" to the table that you want to sort:
   
   <table id="my_table">
   ... more HTML data ...
   "some_name" id should be unique (it's an HTML requirement).
3. Put "<thead>" and "</thead>" tags around the table row that contains column names, like this:
   <table id="my_table">
   <thead>
   <tr><th>Name</th><th>Year</th></tr>
   </thead>
   ... table data ...
   </table>
   You don't necessarily need to use TH tags for that row - TD will work too.
4. Add javascript code to your page:
   <script type="text/javascript" src="/gs_sortable.js"></script>
   <script type="text/javascript">
   <!--
   var TSort_Data = new Array ('my_table', 's', 'i', 'f');
   tsRegister();
   // -->
   </script>
   "tsRegister();" is optional if you want the script to handle only one table on the page, and required if you want to add column sorting to more than one table. The part that you need to change in this code is located inside of Array parenthesis. The first parameter in array ("my_table" in the example above) should match id of the table. All other parameters specify type of data in table columns - the second parameter specifies type of data in the first column, the third parameter specifies type of data in the second column, and so on. "Type of data" parameters can be set to:
   
   'i' - Column contains integer data. If the column data contains a number followed by text then the text will ignored. For example, "54note" will be interpreted as "54".
   
   'n' - Column contains integer number in which all three-digit groups are optionally separated from each other by commas. For example, column data "100,000,000" is treated as "100000000" when type of data is set to 'n', or as "100" when type of data is set to 'i'.
   
   'f' - Column contains floating point numbers in the form ###.###.
   
   'g' - Column contains floating point numbers in the form ###.###. Three-digit groups in the floating-point number may be separated from each other by commas. For example, column data "65,432.1" is treated as "65432.1" when type of data is set to 'g', or as "65" when type of data is set to 'f'.
   
   'h' - column contains HTML code. The script will strip all HTML code before sorting the data.
   
   's' - column contains plain text data.
   
   'c' - column contains dollar amount, prefixed by '$' character. The amount may contain commas, separating three-digit groups, like this: $1,234,567.89
   
   'd' - column contains a date.
   
   '' - do not sort the column.
   

   It is important to note that all data types, except 's' and '', strip all HTML code from data columns before sorting.

   As an example of sortable table with different data types, let's pretend that you want to show recent sales of some equipment, and include equipment name, sale date, sale price and the number of units sold. If you want to sort all columns in this table, then the data type for the first column will be 's' (string) or 'h' (HTML code), the second column will have 'd' (date) data type, the third column will have 'c' (currency) data type, and the last column should be set to data type 'i' (integer) or 'n' (a number). Assuming that the table has "sortable_table" id, the javascript code will look like this:

   <script type="text/javascript">
   <!--
   var TSort_Data = new Array ('sortable_table', 's', 'd', 'c', 'i');
   tsRegister();
   // -->
   </script>

   Below is an example of the table, that uses javascript code above:

   Product	Date	Price per unit	Units sold
   Item A	13/5/2012	$25.15	20
   Item B	14/5/2012	$35	1
   Item A	14/5/2012	$28	1
   Item C	15/5/2012	$20	100

5. If you want to add table sort feature to more than one table on the page then repeat steps 2, 3 and 4 for each table. Make sure that javascript code in the step 4 includes "tsRegister();" statement for each table. If you specify any advanced additional parameters (see "Advanced Features" section below for more information) then you don't need to reset them after each call to the tsRegister function - the function does it automatically.

That's it. The javascript code was tested in the latest versions of IE6, Firefox, Chrome and Opera browsers.

Advanced Features

• Setting initial sorting

  You can specify initial sorting order of one or more columns in the table by setting TSort_Initial variable. To sort one column in ascending order set this variable to column number:

  <script type="text/javascript">
  <!--
  var TSort_Data = new Array ('sortable_table', '', 's', 's', 'i');
  var TSort_Initial = 1;
  tsRegister();
  // -->
  </script>
  Please note that the column numbering starts from 0, so setting TSort_Initial to 1 will sort the second column in ascending order. You can tell the script to set exact sorting order (ascending, descending or unsorted) for a column if you replace the column number with a string in format "<column_number><sorting_order>", where <sorting_order> is:
  
  A - ascending order
  
  D - descending order
  
  U - unsorted
  
  For example, use '1D' string to sort the second column in the descending order.
  
  To specify initial sorting for multiple columns you'll need to set TSort_Initial variable to an array containing column numbers and/or column sorting order strings:
  <script type="text/javascript">
  <!--
  var TSort_Data = new Array ('sortable_table', '', 's', 's', 'i');
  var TSort_Initial = new Array (1, '2D');
  tsRegister();
  // -->
  </script>
  In the example above the table will be sorted by the second column in ascending order, and then by the third column in descending order.
  
  

• Zebra striping

  If you want to use different background colors for odd and even rows (zebra striping) then you can tell the script to apply background colors to sorted records. First, create two CSS classes with background colors for your table. Then add the line below between <script ...> and </script> tags:

  var TSort_Classes = new Array ('class1_name', 'class2_name');

  If you set initial sorting (please see "Setting initial sorting" feature for more details), you can force the gs_sortable to apply zebra classes when the web page is loaded. For instance, to sort the first column in ascending order you will need this code:

  var TSort_Initial = '0A';

  By default, when Zebra striping is enabled, the script sets classes for TR tags from the TSort_Classes array, wiping out whatever classes the TR tags had beforehand. You can tell the script to append Zebra classes instead by setting TSort_AppendClasses variable:

  var TSort_AppendClasses = 1;

  Be warned that Zebra striping may not work correctly if the table is generated with Zebra striping classes by your server script, and the TSort_AppendClasses variable is set.

  To demonstrate all possible Zebra striping options, let's assume that you want to have even/odd zebra striping, you want to preserve highlighting of one or more rows in the table, and that the table's first column by default is sorted in ascending order. In this case your javascript code will look like this:

  <script type="text/javascript">
  <!--
  var TSort_Data = new Array ('table_demo_zebra', '', 's', 's', 'i');
  var TSort_Classes = new Array ('row1', 'row2');
  var TSort_AppendClasses = 1; var TSort_Initial = '0A'; tsRegister();
  // -->
  </script>

  Here is a sample table that uses similar javascript initialization code:

  US City	State	Population (millions)
  Chicago	Illinois	2,836,658
  Houston	Texas	2,208,180
  Los Angeles	California	3,834,340
  New York	New York	8,274,527
  Phoenix	Arizona	1,552,259

  As you can see, the script automatically applies the row1/row2 classes to the table when the page is loaded, as well as when the data is sorted, while preserving highlighting of the row with numbers for New York city.

  The gs_sortable script may be used to do more complex zebra striping. For example, if you want to use row3 class for every 4th row, and row2 class for all other even rows then TSort_Classes definition will look like:

  var TSort_Classes = new Array ('row1', 'row2', 'row1', 'row3');
  
  
  

• Sorting subset of rows

  The gs_sortable script was originally designed to handle simple HTML tables, that have one set of data per each row. Starting from version 1.9, the gs_sortable script may work with complex tables, that utilize multiple rows to display one set of data. For example, the table may show population of US states, using 4 separate table rows for each state: the first row is for the state population, and the following three rows are for the three largest cities. One of the possible ways to sort data in such table is to sort only rows with state population, and ignore all other rows with city data. At the same time, the script should be smart enough to keep city data next to the row with the state data, when the state row is moved around. This type of sorting can be accomplished by adding hints to table rows. Specifically, all rows, that shouldn't be sorted, must have "_nosort" CSS class name set:

  <tr class='row2'><td>New York state</td><td>19,465,197</td></tr>
  <tr class='_nosort'><td> &nbsp; New York City</td><td>8,175,133</td></tr>
  <tr class='_nosort'><td> &nbsp; Buffalo</td><td>261,310</td></tr>
  <tr class='_nosort'><td> &nbsp; Rochester</td><td>210,565</td></tr>
  

  All TR rows without "_nosort" class are treated as sortable, and the rows with the "_nosort" class are handled as child rows, attached to their parent row. In the example above, the row with New York state data is a parent row, that will be sorted by the gs_sortable. Three other rows with city data are moved along with the parent row when the position of the parent row changes in the table. Below is an example of complex table, containing only three states:

  State / City	Population
  New Mexico	2,082,224
  Albuquerque	545,852
  Las Cruces	97,618
  Rio Rancho	87,521
  New York state	19,465,197
  New York City	8,175,133
  Buffalo	261,310
  Rochester	210,565
  North Carolina	9,656,401
  Charlotte	731,424
  Raleigh	403,892
  Greensboro	269,666

• Using external buttons or objects to change sorting

  To change sorting order of any column when a user clicks on a button, a link, or any other object, add an onClick event to the object and call a tsDraw function with either a column number or column sorting order string (see "Setting initial sorting" above) as the first parameter, and id of the table as the second parameter. The second parameter can be omitted if you have only one table with sortable columns, or if you call tsDraw function the second, the third, etc time in a row for the same table. For example, the button below will change sorting order of all columns in the table at the top of this page to "unsorted".

  City	Area (km2)	Population (millions)
  Mumbai	440	12.78
  Karachi	3530	12.21

  Below is an HTML code for this button. Notice that only the first call to tsDraw includes table id:

  <input type='button' name='action' value='Reset sorting' onClick='tsDraw("0U", "table_demo_world"); tsDraw("1U"); tsDraw("2U")'>

  The button below will sort in ascending order three columns in the table:

  HTML code for the button:

  <input type='button' name='action' value='Sort all' onClick='tsDraw("2A", "table_demo_world"); tsDraw("1A"); tsDraw("0A")'>
  
  

• Replacing Up/Down arrows with other characters

  By default the script uses up and down arrows to indicate current sorting order. You can replace these two characters with any other characters, text or HTML code by setting TSort_Icons variable:

  <script type="text/javascript">
  <!--
  var TSort_Data = new Array ('table_demo_icons', '', 's', 'i', 'f');
  var TSort_Icons = new Array (' (Ascending)', ' (Descending)');
  tsRegister();
  // -->
  </script>

  Here is an example of a table that uses javascript code above:

  City	Area (km2)	Population (millions)
  Mumbai	440	12.78
  Karachi	3530	12.21

  TSort_Icons parameter applies only to current table. If desired, you can replace the characters / text with any HTML code, including <img ...> tags. Be careful when you do that - the script changes text color to indicate primary, secondary or tertiary column, and, if the HTML code contains just an image, then it will be impossible to differentiate between primary, secondary and tertiary columns.
  
  

• Changing the number of sortable columns

  By default, the script sorts data in the primary column (that was sorted the last). All data values, that are identical in that column, are sorted based on the secondary column, and if they are still identical then gs_sortable uses data from the tertiary column. Sometimes it is needed to sort data in more than three columns at once, at other times you may need to sort data only in one or two columns. You can easily adjust the number of sortable columns by setting TSort_NColumns variable:

  <script type="text/javascript">
  <!--
  var TSort_Data = new Array ('table_demo_ncolumns', '', 's', 'i', 'f');
  var TSort_NColumns = 1;
  tsRegister();
  // -->
  </script>

  Here is a sample table that uses javascript code above:

  City	Area (km2)	Population (millions)
  Mumbai	440	12.78
  Karachi	3530	12.21

  
  

• Using script with dynamically loaded tables

  When a web page is loaded, the gs_sortable script automatically registers and initializes all sortable tables on the page. During initialization phase, the script parses table contents, and saves parsed values so that they can be used at a later time without re-parsing. It also makes copies of table rows. The problems arise when the page contains dynamically loaded tables, i.e. tables, which contents is modified by javascript code after the page finished loading. The gs_sortable script does not know that the contents of the table was dynamically changed, and it happily uses previously stored data to sort columns' data. As a result, it may replace the contents of updated table with the original contents, that existed when the page was loaded.

  Nevertheless, dynamic tables do work with the gs_sortable if they are properly registered and initialized immediately after they were modified. Below is an example of initialization code for dynamic table with id "table_demo_dyn1":

  <script type="text/javascript">
  <!--
  function InitDynTable1 ()
  {
    TSort_Data = new Array ('table_demo_dyn1', 's', 'i', 'f');
    tsRegister();
    tsSetTable ('table_demo_dyn1');
    tsInit();
  }
  // -->
  </script>

  You may need to define TSort_Data variable if it's not defined elsewhere on the page. It is recommended to implement initialization code as a function, so you can call it when needed. Below is an example of two dynamically loaded tables, that use initialization function, similar to the provided one. This example uses hardcoded table contents, although the same approach can be used with table data, loaded by AJAX script:

  
  

• Storing sorting order in a cookie

  By default, the script does not preserve current sorting order when the page reloads, or when a visitor leaves the page and returns to it later. You can tell the script to preserve sorting order for any table on the page by setting TSort_Cookie variable to cookie name, preferably the same as table id:

  <script type="text/javascript">
  <!--
  var TSort_Data = new Array ('sortable_table', '', 's', 'i', 'f');
  var TSort_Cookie = 'sortable_table';
  tsRegister();
  // -->
  </script>

  Using the same name for table id and cookie name is not a requirement, if you wish you give the cookie any name. If you use gs_sortable script to sort data in multiple tables on the same page and you want to preserve sorting order for all tables then you will need to set TSort_Cookie variable for each of those tables. Make sure that cookie names for all those tables are different!

Changes from version 1.8

• It is now possible to sort only a subset of rows in the table body, while keeping the rest of the rows "attached" to those sortable rows. When the position of the sortable row is changed in the table, all "attached" rows are automatically moved together with it.
• "Zebra striping" feature in the old version of the script replaced any CSS classes, assigned to TR rows. I added an option to append Zebra striping classes to existing TR classes.
• You can change the number of columns, sorted by the script, from 3 to any other number, by setting TSort_NColumns variable.
• It is no longer necessary to define table header (THEAD) tag. If this tag is missing, the script will create table header, and move all rows with TH tags there. Be aware that after the move the rows will be displayed at the top of the table, therefore this functionality is only useful for simple tables, that have one or several rows with TH tags at the top, and all remaining rows have only TD tags.
• Before sorting, the script now strips all HTML code for all data types, but 's'. If you used non-'s' data types to sort data with HTML code, please change the data type to 's'.
• gs_sortable now properly sorts columns with dates in cases, when cells in the columns contain blank data, or when some cells are missing due to insufficient number of cells in the row.

Some of the changes and fixes were submitted by Vilem Marsik and Andrey Elistratov. Thank you!

Version 1.9 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.9 should not require any changes to HTML pages.

Changes from version 1.7

The script can handle US currency in the form $XXX.XX.

Tables without rows no longer result in javascript error. This change incorporates fix supplied by David Sacker.

Version 1.8 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.8 doesn't require any changes to HTML pages.

Changes from version 1.6

The script now handles dates in the following formats: <year>-<month>-<day> and <year>-<month>-<day> <hours>:<minutes>:<seconds>.

Version 1.7 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.7 doesn't require any changes to HTML pages.

Changes from version 1.5

The script now properly handles tables that have two header rows. For an example please see the first demo table on this page.

Version 1.6 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.6 doesn't require any changes to HTML pages.

Changes from version 1.4

The script can now sort integer and floating-point data where three-digit groups are separated by commas ('n' and 'g' data type parameters).

Version 1.5 of the script is compatible with older versions of the script. You can replace old version of the script with the version 1.5 without changing your HTML pages.

Changes from version 1.3

• The script now supports multiple tables.
• Added sorting by date.
• Sorting order can be optionally stored in a cookie, and restored when a visitor returns to the page later.
• Up/Down arrows can be optionally changed to different character or image.

Version 1.4 of the script is compatible with older versions of the script. You can replace old version of the script with the version 1.4 without changing your HTML pages.

Changes from version 1.2

• You can specify exact sorting order for one or more columns.
• Added "HTML code" data type.
• Fixed a bug where a script wouldn't start at all.

Version 1.3 of the script is compatible with older versions of the script. You can replace old version of the script with the version 1.3 without changing your HTML pages.

Changes from version 1.1

You can specify initial sorting order of the columns in the version 1.2.

Version 1.2 of the script is directly compatible with versions 1.1 and 1.0. You can replace old version of the script with the new version without changing your HTML pages. You will need to make a small change in HTML pages if you want to add support for setting initial sorting order.

Changes from version 1.0

• You can switch columns back to unsorted order. The first click on any unsorted column header sorts the data in ascending order, the second click makes it sort in descending order, and the third click now switches the column to unsorted order.
• You can tell the script to apply zebra striping to sorted records.
• Identical data in sorted columns is now displayed in the same order as it was supplied in the HTML document.

Version 1.1 of the script is directly compatible with version 1.0. You can replace old version of the script with the new version without changing your HTML pages. You will need to make a small change in HTML pages if you want to add support for table zebra striping.

Download:

gs_sortable.js v1.9 (beta version) - uncompressed file
gs_sortable.js v1.8 (latest stable version) - uncompressed file
gs_sortable.js v1.7 - uncompressed file
gs_sortable.js v1.6 - uncompressed file
gs_sortable.js v1.5 - uncompressed file
gs_sortable.js v1.4 - uncompressed file
gs_sortable.js v1.3 - uncompressed file
gs_sortable.js v1.2 - uncompressed file

Future enhancements:

None planned.

License:

The script is released under GPL v3.0 license. You're welcome to distribute the script and to use it on your web pages if you like. If you decide to modify it please make sure that you release the changed code.

Contact

If you have any questions, corrections or additions to the code, you can contact me using this form.

Spread the word:

If you use this script and like it please consider adding a link to this page. This will make it easier for other people to find this script. And the more people use the script the more I'll be inclined to improve it.

(c) Copyright 2007 - 2009 Gennadiy Shvets