Linux Hosting
NT/2000 Hosting
DYO Internet Access
JAVASCRIPTez.com
PHPez.com
ASPez.com

Select a Domain
    

Creating Sortable Tables in HTML

I recalled having seen an article on sortable tables in HTML but until recently had not had reason to create sortable tables. However a client recently requested a sortable table within a web page instead of having to display four different html files. So I searched and found the article again at http://builder.cnet.com/webbuilding/pages/Programming/Scripter/080999/?tag=st.bl.7264cd3.plbl . You can obtain their js.file from their web site.

To use this CNET javascript file, you merely customize their code like this:

var data = new Array(
new Array("Smith","Will","10"),
new Array("Jones","Bill","10000"),
new Array("Doe","John","200"),
new Array("Wilson","Don","50"),
)
var buttons = 
    new Array("Last Name","First Name","Employee Number")
var table = 
    new SortableTable("example3",4,3,1,"50%","RIGHT")
table.setData(data)
table.setButtons(buttons)
table.display()

There is first the data making up the values in the table. This data is obviously for a 3 column table with 4 data rows. It also contains a row of captions defined in the buttons variable.

The table object is created in the var table line and populated in the next two lines and displayed in the last line. The SortableTable parms are

  1. Object id - "example3"
  2. Number of rows - 4
  3. Number of columns - 3
  4. Width of the table border - 1
  5. Width of the table on the screen - 50%
  6. Table alignment - Right
In this article I'll not attempt to explain the logic on the functions which do the real work of creating these sortable HTML tables. I will explain one enhancement I made in the SortableTable_sort function. This function as I found it at CNET sorted case sensitive whereas I believe most sorts would be case insensitive. So I changed the line in this SortableTable_sort function that does the compare (shown below)
if(this.data[i][n] > this.data[i+1][n]) {
to
if(this.data[i][n].toLowerCase() > this.data[i+1][n].toLowerCase()) {
where all I did was to change both sides of the comparison to lower case.

This is a valuable function, but to be useful it should really pull in the data dynamically since it's a lot of work to change the code each time the table values change. So I created a scripted file in ASP where I read the data from a comma delimited table and create the data statements on the fly. Well, you would do that too if you're familiar with ASP. But in addition I wanted to create this .asp file only once so I made the scripted file versatile to process most any comma delimited file into sortable HTML tables. Click ASPez.com or PHPez.com to see how this was done and obtain this free file.

cover
Avg. Customer Review:
April 2001
http://www.htmlgoodies.com
cover
Avg. Customer Review:
April 2001
http://www.microsoft.com
cover
Avg. Customer Review:
April 2001
http://www.wrox.com

PHP Copyright Notice