|
|
|
|
|
|
Linux Hosting NT/2000 Hosting DYO Internet Access JAVASCRIPTez.com PHPez.com ASPez.com
|
Creating Sortable Tables in HTMLI 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
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.
|
|