Hi everyone,
I have this script that I am using to sort data ascending and descending.
The way this sorting works is: by clicking on any of the headers in the HTML table, the records
Will be sorted in the ASC order. Clicking the same header again and the records will be sorted in the DESC order.
The header and the data are included in the same DIV.
What I am trying to figure out is to do the same sorting but when the Header and the Data are in different DIVs.
I have the Header for example in DIV1. part1 of the data that displays Field1 from a table in the database
Is in DIV2, part2 of the data that displays Field2 from a table in the database is in DIV3.
The reason I have many divs is because the data is too large to display on the screen. it forces the user to scroll to the right.In order to avoid the scrolling,I put the data in separate Divs and I added a horizontal scroll bar for every Div.
My question is :How this script should be modified in order to do the sorting in the same time of the data in DIV2 and in DIV3 by clicking on the Header in DIV1 ?
Note: Based on the script the data is stored in an array.
Here is the whole script :
<%@ Language=VBScript %>
<%
Dim objArr(2,3)
objArr(0,0)=100
objArr(0,1)="abc"
objArr(0,2)="19971104"
objArr(0,3)="Me"
objArr(1,0)=400
objArr(1,1)="zzz"
objArr(1,2)="19961003"
objArr(1,3)="You"
objArr(2,0)=300
objArr(2,1)="fox"
objArr(2,2)="19950902"
objArr(2,3)="Them"
Response.Write("<script language='javascript'>"
Response.Write("function init(){"
Dim i
for i=0 to Ubound(objArr)
Response.Write ("myObjectArray[objectArrayIndex++] = new myObject(" & objArr(i,0) & ",'" & objArr(i,1) & "','" & objArr(i,2) & "','" & objArr(i,3) & "');"
next
Response.Write("myObjectBubbleSort(myObjectArray,objectArrayIndex,'none');"
Response.Write("}</script>"
%>
<html>
<head>
<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();
var sortMode='desc';
var output
function showObjectArray(object,length)
{if (sortMode=='desc'){
sortMode='asc';
}else{
sortMode='desc';
}
var str1 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'number');"
var str2 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'text');"
var str3 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'date');"
var str4 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'name');"
output = '<TABLE BORDER=1>';
output += '<TR>' +
'<TH><A HREF=' + str1 + '>number</A></TH>' +
'<TH><A HREF=' + str2 + '>text</A></TH>' +
'<TH><A HREF=' + str3 + '>date</A></TH>' +
'<TH><A HREF=' + str4 + '>name</A></TH>' +
'</TR>';
for (var i=0; i<length; i++)
output += '<TR>' + '<TD>' +
object.number+ '</TD>' +
'<TD>' + object.text + '</TD>' +
'<TD>' + object.date + '</TD>' +
'<TD>' + object.name + '</TD>' +
'</TR>';
output += '</TABLE>';
if (document.all){
document.all.tableDiv.innerHTML=output;
}
if (document.layers){
document.layers['tableDiv'].document.write(output);
document.layers['tableDiv'].document.close();
}
}
function myObjectBubbleSort(arrayName,length,property) {
if (property!="none"{
for (var i=0; i<(length-1); i++)
for (var j=i+1; j<length; j++)
if (sortMode=='desc'){
if (eval('arrayName[j].' + property + '<arrayName.' + property)) {
var dummy = arrayName;
arrayName = arrayName[j];
arrayName[j] = dummy;
}
}else{
if (eval('arrayName[j].' + property + '>arrayName.' + property)) {
var dummy = arrayName;
arrayName = arrayName[j];
arrayName[j] = dummy;
}
}
}
showObjectArray(myObjectArray,objectArrayIndex);
}
//--></SCRIPT>
<!--<P>Obviously I don't have a recordset, so I've still had to create a static
array, but where I loop through my array you could loop through your recordset
and should get similar results.
<P>Good luck,<BR>Matt.-->
</head>
<body onload="init();">
<div id="tableDiv" style="position:absolute;left:100; top:100"></div>
</body>
</html>
I have this script that I am using to sort data ascending and descending.
The way this sorting works is: by clicking on any of the headers in the HTML table, the records
Will be sorted in the ASC order. Clicking the same header again and the records will be sorted in the DESC order.
The header and the data are included in the same DIV.
What I am trying to figure out is to do the same sorting but when the Header and the Data are in different DIVs.
I have the Header for example in DIV1. part1 of the data that displays Field1 from a table in the database
Is in DIV2, part2 of the data that displays Field2 from a table in the database is in DIV3.
The reason I have many divs is because the data is too large to display on the screen. it forces the user to scroll to the right.In order to avoid the scrolling,I put the data in separate Divs and I added a horizontal scroll bar for every Div.
My question is :How this script should be modified in order to do the sorting in the same time of the data in DIV2 and in DIV3 by clicking on the Header in DIV1 ?
Note: Based on the script the data is stored in an array.
Here is the whole script :
<%@ Language=VBScript %>
<%
Dim objArr(2,3)
objArr(0,0)=100
objArr(0,1)="abc"
objArr(0,2)="19971104"
objArr(0,3)="Me"
objArr(1,0)=400
objArr(1,1)="zzz"
objArr(1,2)="19961003"
objArr(1,3)="You"
objArr(2,0)=300
objArr(2,1)="fox"
objArr(2,2)="19950902"
objArr(2,3)="Them"
Response.Write("<script language='javascript'>"
Response.Write("function init(){"
Dim i
for i=0 to Ubound(objArr)
Response.Write ("myObjectArray[objectArrayIndex++] = new myObject(" & objArr(i,0) & ",'" & objArr(i,1) & "','" & objArr(i,2) & "','" & objArr(i,3) & "');"
next
Response.Write("myObjectBubbleSort(myObjectArray,objectArrayIndex,'none');"
Response.Write("}</script>"
%>
<html>
<head>
<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();
var sortMode='desc';
var output
function showObjectArray(object,length)
{if (sortMode=='desc'){
sortMode='asc';
}else{
sortMode='desc';
}
var str1 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'number');"
var str2 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'text');"
var str3 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'date');"
var str4 = "javascript:myObjectBubbleSort(myObjectArray,objectArrayIndex,'name');"
output = '<TABLE BORDER=1>';
output += '<TR>' +
'<TH><A HREF=' + str1 + '>number</A></TH>' +
'<TH><A HREF=' + str2 + '>text</A></TH>' +
'<TH><A HREF=' + str3 + '>date</A></TH>' +
'<TH><A HREF=' + str4 + '>name</A></TH>' +
'</TR>';
for (var i=0; i<length; i++)
output += '<TR>' + '<TD>' +
object.number+ '</TD>' +
'<TD>' + object.text + '</TD>' +
'<TD>' + object.date + '</TD>' +
'<TD>' + object.name + '</TD>' +
'</TR>';
output += '</TABLE>';
if (document.all){
document.all.tableDiv.innerHTML=output;
}
if (document.layers){
document.layers['tableDiv'].document.write(output);
document.layers['tableDiv'].document.close();
}
}
function myObjectBubbleSort(arrayName,length,property) {
if (property!="none"
{for (var i=0; i<(length-1); i++)
for (var j=i+1; j<length; j++)
if (sortMode=='desc'){
if (eval('arrayName[j].' + property + '<arrayName.' + property)) {
var dummy = arrayName;
arrayName = arrayName[j];
arrayName[j] = dummy;
}
}else{
if (eval('arrayName[j].' + property + '>arrayName.' + property)) {
var dummy = arrayName;
arrayName = arrayName[j];
arrayName[j] = dummy;
}
}
}
showObjectArray(myObjectArray,objectArrayIndex);
}
//--></SCRIPT>
<!--<P>Obviously I don't have a recordset, so I've still had to create a static
array, but where I loop through my array you could loop through your recordset
and should get similar results.
<P>Good luck,<BR>Matt.-->
</head>
<body onload="init();">
<div id="tableDiv" style="position:absolute;left:100; top:100"></div>
</body>
</html>