Related items

Dynamic Table Sorting- source

You are here: irt.org | Articles | Dynamic HTML (DHTML) | Dynamic Table Sorting [ previous next ]

Published on: Friday 23rd January 1998 By: Martin Webb

sort.htm

<SCRIPT LANGUAGE="JavaScript"><!--
function myObject(number,text,date,name) {
    this.number = number;
    this.text = text;
    this.date = date;
    this.name = name;
}

var objectArrayIndex = 0;
var myObjectArray = new Array();

function showObjectArray(object,length) {
    var output = '<CENTER><TABLE BORDER=1>';
    output += '<TR>' +
              '<TH><A HREF="sort.htm?number">number<\/A><\/TH>' +
              '<TH><A HREF="sort.htm?text">text<\/A><\/TH>' +
              '<TH><A HREF="sort.htm?date">date<\/A><\/TH>' + 
              '<TH><A HREF="sort.htm?name">name<\/A><\/TH>' + 
              '<\/TR>';
    for (var i=0; i<length; i++)
        output += '<TR>' +
                  '<TD>' + object[i].number+ '<\/TD>' +
                  '<TD>' + object[i].text  + '<\/TD>' +
                  '<TD>' + object[i].date  + '<\/TD>' + 
                  '<TD>' + object[i].name  + '<\/TD>' + 
                  '<\/TR>';
    output += '<\/TABLE><\/CENTER>';
    document.write(output);
}

function myObjectBubbleSort(arrayName,length,property) {
    for (var i=0; i<(length-1); i++)
        for (var j=i+1; j<length; j++)
            if (eval('arrayName[j].' + property + '<arrayName[i].' + property)) {
                var dummy = arrayName[i];
                arrayName[i] = arrayName[j];
                arrayName[j] = dummy;
            }
}

myObjectArray[objectArrayIndex++] = new myObject(100,'abc','19971104','Me');
myObjectArray[objectArrayIndex++] = new myObject(400,'zzz','19961003','You');
myObjectArray[objectArrayIndex++] = new myObject(300,'fox','19950902','Them');
myObjectArray[objectArrayIndex++] = new myObject(50,'bad','19981201','Us');

var sortProperty = window.location.search.substring(1);

if (sortProperty.length != 0) 
    myObjectBubbleSort(myObjectArray,objectArrayIndex,sortProperty);

showObjectArray(myObjectArray,objectArrayIndex);
//--></SCRIPT>

Return

generic.htm

<SCRIPT LANGUAGE="JavaScript"><!--
function myObject() {
    for (var i = 0; i<myObject.arguments.length; i++)
        this['n' + i] = myObject.arguments[i];
}

var objectArrayIndex = 0;
var myObjectArray = new Array();

function showObjectArray(object,length) {
    var output = '<CENTER><TABLE BORDER=1>';
    output += '<TR>';
    for (var j=0; j<width; j++)
         output += '<TH><A HREF="generic.htm?n' + j + '">' + eval('object[0].n'+j) + '<\/A><\/TH>';
    output += '<\/TR>';
    for (var i=1; i<length; i++) {
        output += '<TR>';
        for (var j=0; j<width; j++)
            output += '<TD>' + eval('object[i].n'+j) + '<\/TD>';
        output += '<\/TR>';
    }
    output += '<\/TABLE><\/CENTER>';
    document.write(output);
}

function myObjectBubbleSort(arrayName,length,property) {
    for (var i=1; i<(length-1); i++)
        for (var j=i+1; j<length; j++)
            if (eval('arrayName[j].' + property + '<arrayName[i].' + property)) {
                var dummy = arrayName[i];
                arrayName[i] = arrayName[j];
                arrayName[j] = dummy;
            }
}

var width = 4;
myObjectArray[objectArrayIndex++] = new myObject('Number','Text','Date','Name');
myObjectArray[objectArrayIndex++] = new myObject(100,'abc','19971104','Me');
myObjectArray[objectArrayIndex++] = new myObject(400,'zzz','19961003','You');
myObjectArray[objectArrayIndex++] = new myObject(300,'fox','19950902','Them');
myObjectArray[objectArrayIndex++] = new myObject(50,'bad','19981201','Us');

var sortProperty = window.location.search.substring(1);

if (sortProperty.length != 0) 
    myObjectBubbleSort(myObjectArray,objectArrayIndex,sortProperty);

showObjectArray(myObjectArray,objectArrayIndex);
//--></SCRIPT>

Return

binding.htm

<HTML>
<BODY BGCOLOR = "#FFFFFF">

<OBJECT ID="dataBindId" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL"    VALUE="data.txt">
<PARAM NAME="UseHeader"  VALUE="TRUE">
</OBJECT>

<CENTER>
<TABLE BORDER=1 DATASRC="#dataBindId">
<THEAD>
<FORM>
<TH><INPUT TYPE="BUTTON" VALUE="Number" onClick="document.all.dataBindId.sort='Number';dataBindId.Reset();"></TH>
<TH><INPUT TYPE="BUTTON" VALUE="  Text  " onClick="document.all.dataBindId.sort='Text';dataBindId.Reset();"></TH>
<TH><INPUT TYPE="BUTTON" VALUE="   Date   " onClick="document.all.dataBindId.sort='Date';dataBindId.Reset();"></TH>
<TH><INPUT TYPE="BUTTON" VALUE="  Name  " onClick="document.all.dataBindId.sort='Name';dataBindId.Reset();"></TH>
</FORM>
</THEAD>
<TBODY>
<TD><DIV DATAFLD="Number">Number Here</DIV></TD>
<TD><DIV DATAFLD="Text">Text Name Here</DIV></TD>
<TD><DIV DATAFLD="Date">Date Here</DIV></TD>
<TD><DIV DATAFLD="Name">Name Here</DIV></TD>
</TBODY>
</TABLE>
</CENTER>

</BODY>
</HTML>

Return

Related items

Dynamic Positioning

What is So Dynamic About Dynamic HTML?

Building a Dynamic Thank You Page

Fancy Background Fader

Moving Elements in DHTML

An Introduction to Microsoft Layers

An Introduction to Netscape Layers

Pr�t � lire

Family Trees

Creating a JavaScript site map