How to add sorting to tables on a web page with InfoFind Web Tools
About InfoFind Web Tools
InfoFind Web Tools is for web page designers and developers and it is completely free to use in commercial or open source products and for either business or personal web pages. It contains several JavaScript Files that help make web pages more interactive. Many of the features can be used without having to write any JavaScript code and it is designed to work with all popular browsers on Windows, Mac, and Unix/Linux. Some of the features of InfoFind Web Tools include:- HTML Table Sorting
- Animated Picture Slide Shows
- Web Page Animation
- Advanced Form Validation
- Functions for working with Data Types (Strings, Numbers, Currency, etc)
- Functions for working with Web Pages, CSS Scripts, and Individual Elements
- Page Updates through Web Requests (AJAX)
Special Notice – InfoFind Web Tools is focused on web application development such as database applications. InfoFind Web Tools does have some animation features but if you are looking only for animation scripts or larger control libraries you might want to check out one of the following JavaScript Libraries (script.aculo.us, scripty2, jQuery, MooTools) or JavaScript Frameworks (Yahoo YUI, BBC Glow, Microsoft ASP.NET AJAX Control Toolkit). InfoFind Web Tools is written in a way so that is it easy to modify and copy individual functions that you need for your applications. Many updates will be coming in late 2010 or 2011 so please check back soon.
Sorting with InfoFind
InfoFind Web Tools allows web page artists and web page developers to easily add advanced sorting to tables on a web page. InfoFind determines the type of data being sorted and can even sort mixed data types. The sort order that InfoFind uses is Blanks, Numbers/Currency/File Size, Dates, and Text (Case-Insensitive, but if Equal Upper First). Table sorting is designed to work with many variations of html code and if the table is using alternating row colors based on class description then InfoFind handles that as well.To add sorting to a web page first add the JavaScript file [InfoFind.js] to the page:
<script type="text/javascript" src="InfoFind.js">Then to add sorting to a table add the style "Sortable" to the CSS class of the table. The table below is sorted using the following example:
<table id="Table1" class="Sortable DataTable">Now you can sort the data by clicking on any column in the table.
| Original Order | Mixed Data | Text | Numbers | File Size | Dates |
|---|---|---|---|---|---|
| # of Records: 25 | |||||
| 1 | Japan | United States | 23,432 | 3,734 KB | 2/8/2006 3:58:46 PM |
| 2 | $-500 | Canada | -45 | 3/12/2008 4:40:35 PM | |
| 3 | United States | Mexico | 0 | 1,575 KB | 3/19/2006 6:48:29 PM |
| 4 | $1,000.00 | Hong Kong | 50 | 2 KB | 4/23/2004 9:12:36 AM |
| 5 | 2/1/2009 | Japan | 845,415 | 4/30/2009 1:19:17 PM | |
| 6 | China | Korea, South | 54,765 | 8,961 KB | 4/24/2008 9:08:15 PM |
| 7 | Peru | 595,456 | 7 KB | 2/11/2007 6:05:30 PM | |
| 8 | 2/1/2008 | Korea, North | -75,865 | 9 KB | 2/11/2008 6:06:15 PM |
| 9 | 3/1/2008 | Belgium | -23,431 | 47 KB | 1/9/2008 10:13:38 PM |
| 10 | aaaaa | Germany | 23,433 | 245 KB | 4/28/2007 10:33:37 AM |
| 11 | bbbbb | Czech Republic | 7,956,465 | 2,097,152 KB | 12/5/2005 7:24:59 PM |
| 12 | Germany | China | -156 | 0 KB | 2/11/2008 6:15:02 PM |
| 13 | France | India | 1,563 KB | 4/25/2008 5:10:33 PM | |
| 14 | $1,000.00 | United Kingdom | 4,784,641 | 344 KB | 11/16/2007 6:01:12 PM |
| 15 | $500 | Russia | 564,132 | 76 KB | 11/2/2006 5:30:29 PM |
| 16 | 1/1/2009 | -89,546 | 75 KB | 2/17/2009 12:44:24 AM | |
| 17 | -$1,000 | France | 999 | 18 KB | 2/17/2008 1:17:47 AM |
| 18 | Brazil | 1,000 | 1,510 KB | 1/21/2004 8:15:31 PM | |
| 19 | $1,000.50 | Italy | -84,945 | 1,068 KB | 2/11/2006 7:41:13 PM |
| 20 | aaaaa | Spain | 4,564,556 | 760 KB | |
| 21 | AAAAA | Greece | -84,955 | 89,156 KB | 2/11/2008 5:58:22 PM |
| 22 | BBBBB | Bulgaria | 128,984 | 33,663 KB | 2/18/2007 3:14:50 PM |
| 23 | 1/1/2008 | Mongolia | 706 KB | 4/23/2006 9:45:11 AM | |
| 24 | 4/1/2008 | Taiwan | 813,345 | 211,760 KB | 4/30/2009 11:21:11 AM |
| 25 | 4/1/2008 | Philippines | 813,345 | 131 KB | 4/23/2008 9:48:19 AM |