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)
To see many useful demos of InfoFind Web Tools and to have all versions including InfoFind_Lite then click here to download InfoFind Web Tools, demo files, and documentation.

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 2011 so please check back later.

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 OrderMixed DataTextNumbersFile SizeDates
# of Records: 25
1JapanUnited States23,432 3,734 KB2/8/2006 3:58:46 PM
2$-500Canada-45  3/12/2008 4:40:35 PM
3United StatesMexico0 1,575 KB3/19/2006 6:48:29 PM
4$1,000.00Hong Kong502 KB4/23/2004 9:12:36 AM
52/1/2009Japan845,415  4/30/2009 1:19:17 PM
6ChinaKorea, South54,765 8,961 KB4/24/2008 9:08:15 PM
7 Peru595,4567 KB 2/11/2007 6:05:30 PM
82/1/2008Korea, North-75,865 9 KB2/11/2008 6:06:15 PM
93/1/2008Belgium-23,431 47 KB1/9/2008 10:13:38 PM
10aaaaaGermany23,433245 KB4/28/2007 10:33:37 AM
11bbbbbCzech Republic7,956,465 2,097,152 KB12/5/2005 7:24:59 PM
12GermanyChina-1560 KB 2/11/2008 6:15:02 PM
13FranceIndia 1,563 KB 4/25/2008 5:10:33 PM
14$1,000.00United Kingdom 4,784,641344 KB11/16/2007 6:01:12 PM
15$500Russia564,13276 KB11/2/2006 5:30:29 PM
161/1/2009 -89,54675 KB 2/17/2009 12:44:24 AM
17-$1,000France99918 KB 2/17/2008 1:17:47 AM
18 Brazil1,0001,510 KB 1/21/2004 8:15:31 PM
19$1,000.50Italy-84,945 1,068 KB2/11/2006 7:41:13 PM
20aaaaaSpain4,564,556 760 KB 
21AAAAAGreece-84,955 89,156 KB2/11/2008 5:58:22 PM
22BBBBBBulgaria128,984 33,663 KB2/18/2007 3:14:50 PM
231/1/2008Mongolia 706 KB4/23/2006 9:45:11 AM
244/1/2008Taiwan813,345 211,760 KB4/30/2009 11:21:11 AM
254/1/2008Philippines813,345 131 KB4/23/2008 9:48:19 AM