Sort Alphabetically or Chronologically

[Wiz Creations]

Is there a way to enter data onto a page and have 2 links at the top: one to sort alphabetically and one to sort in chronological order (preferably reverse).

Example: If I had these three sets of info to sort...

name: R & R
date: August 2005

name: Dress
date: January 2006

name: WH
date: June 2006


It would be an added bonus if it could be set up to do something where you put the mouse over the link that says Alphabetical and a menu hovers at the mouse with the options A to Z or Z to A.

Thanks for the help.

[BrownBear]

there is a nice way to do that using javascript, xml data and XSLT.
Search google on "Javascript XSLT sort"

[Wiz Creations]

I'm looking at this, but I don't understand it at all. Do you know of a site that explains it in an easy to understand way?

[Wiz Creations]

...

[slaughters]

Here is a Sort Table I wrote that will correctly sort date formats, currency formats, percent formats, etc..

http://www.stansight.com/sort/index.html

All you should need is the HTML file, the associated JavaScript .js file, and the small images used for ascending, descending, etc. graphics

You can change the table colors to anything you want by modifying the style definitions in the HTML file

[Wiz Creations]

Thanks for that. It is kind of what I'm looking for, but not in a format I could use. I'm not sure what the javascript is doing because I don't really know javascript, and so I wouldn't be able to modify it into what I need.

I'm just going to have 3 divs with a name, date, and description, and occasionally I will add another div to it. If there was a way that I could name each div and assign a numerical value for the date (ie Aug 06 = 0806) and have the javascript search each div for that and put them in order, that would be what I'm trying to do.

[ProggerPete]

You'll be hard pressed to find a pre-built sorting script that works on divs. Your best bet is probably to change your markup to use a table and then use slaughters', or better yet, my script (http://dynamictable.com). =)

[Wiz Creations]

I don't think a table would work for me becuse my content isn't going to go across a row. It will have the name on one line, the date on the next, and a description on the line(s) after that. I don't have any idea how to modify the javascript either.

I guess I could create multiple pages all sorted differently if all else fails.

[ProggerPete]

Ah, I see.

It can definitely be done but (as I said before) I really can't see you finding a pre-built script to do this.

If you've got no idea on the javascript front you need to find someone else to do it for you, do it server-side or go with the pre ordered pages you mentioned.

[Wiz Creations]

I don't know server-side code either. With exception of HTML and CSS, I can understand a little bit of each language, but I usually get lost. I'll do a search, but I probably will have to be going with the multiple files.

[Ultimater]

Give this page of mine a view that I built for someone. It defines the Array prototype function sortOn as it appears in Flash version 7 to sort Associative Arrays via a given key.
http://www.aplustv.com/public_stuff/jclarke/products.html
It requires your data to be in this format:

var db=new Array();
db[0]={"name": "R & R", "date": "August 2005"};
db[1]={"name": "Dress", "date": "January 2006"};
db[2]={"name": "WH", "date": "June 2006"};

[ProggerPete]

If the number of items you want to show is small doing it manually won't be too much effort anyway.

[Ultimater]

Not that hard to make use of my prototype function.
Full-fledged example:

<script type="text/javascript">
/*<![CDATA[*/
Array.CASEINSENSITIVE=1;
Array.DESCENDING=2;
Array.UNIQUESORT=4;
Array.RETURNINDEXEDARRAY=8;
Array.NUMERIC=16;
Array.prototype.clone=function(){return Array.apply(null,this);}
Array.prototype.numericSort=function(){
var goodSort=true;
var myArray=this.clone();
myArray.sort(function(a,b){
a=Number(a)
b=Number(b)
if(isNaN(a)||isNaN(b))goodSort=false
return a-b;
})
if(goodSort)return myArray;
else return null;
}

Array.prototype.sortOn=function(sortKey,sortOptions){
var myArray=this.clone();
var caseinsensitive=0;
var descending=0;
var uniquesort=0;
var returnindexedarray=0;
var numeric=0;
if(sortOptions){
if((sortOptions|Array.CASEINSENSITIVE) == sortOptions)caseinsensitive=1;
if((sortOptions|Array.DESCENDING) == sortOptions)descending=1;
if((sortOptions|Array.UNIQUESORT) == sortOptions)uniquesort=1;
if((sortOptions|Array.RETURNINDEXEDARRAY) == sortOptions)returnindexedarray=1;
if((sortOptions|Array.NUMERIC) == sortOptions)numeric=1;
}
var l=myArray.length;
var nArray=new Object();
var sArray=new Array();
for(var i=0;i<l;i++){
if(caseinsensitive)myArray[i][sortKey]=myArray[i][sortKey].toLowerCase();//myArray can be edited because it is a clone
if(!nArray[myArray[i][sortKey]])nArray[myArray[i][sortKey]]=new Array();
else if(uniquesort)return null;//abort the sort, found two elements in the primary key that match.
nArray[myArray[i][sortKey]].push(i);
sArray.push(myArray[i][sortKey])
}
if(numeric){//numberic sort.
sArray=sArray.numericSort();
if(!sArray)return null;//NaN encountered
}else{
sArray.sort();
}

var r=new Array();
var len=sArray.length;
for(i=0;i<len;i++){
r.push( nArray[sArray[i]].shift() )
}
r=r.join(",").split(",");//turning a 2D array into a 1D array
if(descending)r.reverse();
if(returnindexedarray)return r;
l=this.length
var fArray=new Array();
for(i=0;i<l;i++){
fArray.push(this[r[i]]);
}
return fArray;
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
var db=new Array();
db[0]={"name": "R & R", "date": "August 2005"};
db[1]={"name": "Dress", "date": "January 2006"};
db[2]={"name": "WH", "date": "June 2006"};
alert(db[0].name+" "+db[0].date+"\n"+db[1].name+" "+db[1].date+"\n"+db[2].name+" "+db[2].date+"\n")
db=db.sortOn("name");
alert(db[0].name+" "+db[0].date+"\n"+db[1].name+" "+db[1].date+"\n"+db[2].name+" "+db[2].date+"\n")
db=db.sortOn("name",Array.DESCENDING);
alert(db[0].name+" "+db[0].date+"\n"+db[1].name+" "+db[1].date+"\n"+db[2].name+" "+db[2].date+"\n")
/*]]>*/
</script>

[Wiz Creations]

I have no idea what to do with that code...

I was able to find something with my search. It looks like it might work, but it wouldn't be very friendly to update. Sorting divs with Javascript and DOM (http://dev.nae.de/dom-sorting/). With my understanding, it sorts based on the number in the id. I don't know how I would make it sort again. Is it possible someone could modify this?

I could use the id for dates (in the format yymmdd) and I'm thinking that if there was a way to use the title attribute to give each div name. I would also need to make both the functions go in reverse. That would result in a total of 4 functions.

<script type="text/javascript">
function sortDivs(theID) {
var currDivs = [];
var theParentNode = document.getElementById(theID);
for(var i = 0; i < theParentNode.childNodes.length; i++) {
if(theParentNode.childNodes[i].nodeType == 1) {
currDivs.push(theParentNode.childNodes[i].innerHTML);
}
}
currDivs.sort();
var index = 0;
for(var i = 0; i < theParentNode.childNodes.length; i++) {
if(theParentNode.childNodes[i].nodeType == 1) {
theParentNode.childNodes[i].innerHTML = currDivs[index ++];
}
}
}
</script><div class="sortgroup">
<div id="all1">
<div id="d11">peter</div>
<div id="d12">john</div>
<div id="d13">mark</div>

<div id="d14">anna</div>
<div id="d15">zeke</div>
<div id="d16">mary</div>
</div>
<p>
<a href="#" onclick="sortDivs('all1');return false;" title="Sort Alphabetically">Sort</a>
<p>

</div>

[Wiz Creations]

If someone has the time (and it's possible), could you modify this with the above specifications?

I'd be happy to give you credit for it.

[Wiz Creations]

..?

Would it be possible?