PHP to sort <dt> and <dd> items?

[tmallen]

I have a <dl> list of my services for my business website. The way a <d> works is that every <dt> is coupled with a <dd>, although there's no way to know this from the code (you just put you list in the order <dt></dt><dd></dd><dt></dt><dd></dd> so that is makes sense visually. Anyway, here's what I'd like.

 

My services list has my most important services (Web Design, etc.) at the top. I'd like the visitor to have the option of sorting these alphabetically. How would a script be written that graps the <dt> tags and matches them with their <dd> tags, sorts these pairs based on the first letter of the <dt> tag, and then prints them in alphabetical order?

[redarrow]

lookup regex to get the d's then use arrays...........

[tmallen]

Man, you're way above my head here. Could you please explain in more detail?

[tmallen]

Please?

[simcoweb]

Ummm, what you really need is a hefty dose of Ajax to create sortable tables. Google it and you'll find a few good scripts and resources for it.

[tmallen]

Not tables here, links for about seven services. On my business site.

[Ken2k7]

Ummm, what you really need is a hefty dose of Ajax to create sortable tables. Google it and you'll find a few good scripts and resources for it.

Only if his data is in the database to start with.

 

@tmallen: If your data is in the database, you can use a SQL sorting tool. If it's just plain written HTML, you can use JavaScript. You can grab all the <dt> and <dd> tags using JS DOM and then store them in 2 arrays. This is quite tricky because you have to make 3 arrays (one for auxiliary). JS does have a sort() function that, by default, sorts an array lexicographically (or in other terms, alphabetically). I'm thinking you'll need to store all the DTs in an auxiliary array so that you can use the sort function on that array, and then reference how to display them by using the first 2. I know this is confusing. It's not easy. Maybe this will help:

 

This code is NOT guaranteed to work. I wrote this on the spot.

<script type='text/javascript'>
// get all the dt and dd tags
// the variables (dt and dd) below are arrays
// THIS WON'T WORK EFFICIENTLY IF YOU HAVE MULTIPLE DROPDOWN LISTS
// FOR MULTIPLE DROPDOWN LISTS, YOU WILL NEED TO ADD EXTRA STEPS
var dt = document.getElementsByTagName("dt");
var dd = document.getElementsByTagName("dd");

// define 1 array - dts
var dts = [];

/* *********************************************************\
* loop through all the element of dt and store them into dts and dds
* we don't need to do the same for dd because we don't need its values.
* NOTE: you don't want to store the original value because that'll be redundant.
*          we only want the text inside the dt and dd tags. Use innerHTML.
\**********************************************************/
for (_dt in dt) dts[_dt] = dt[_dt].innerHTML;

// sort the array dts
dts.sort();

/*****************************************************\
* now this is the hard part, we need to go through dts and display the
* HTML back onto the page correctly. We need to loop twice here. Nest it.
\*****************************************************/
// this variable contains the full HTML
var page = "";

for (_d in dts){
    for (_dt in dt){
         // don't forget to use innerHTML to match dts[_d]
         if (dt[_dt].innerHTML == dts[_d]){
            // we need to tack back dd
            page += dt[_dt] + dd[_dt];
         }
    }
}

/***************************************************************\
*  this prints it out. Please note that you will need to specify where to print this.
* NOTE: THERE IS AN ALTERNATE SOLUTION TO JUST CHANGE THE DROPDOWN LIST
* AT ITS LOCATION. YOU WILL NEED TO MODIFY THE NESTED FOR LOOP ABOVE AND
* ADD 2 EXTRA ARRAYS. I'M JUST LAYING OUT THIS TO SHOW YOU AN EXAMPLE
\***************************************************************/ 
document.write(page);
</script>

[tmallen]

I'd prefer to do this with PHP so that handling is done server-side, before the page begins loading. In any case, it shouldn't be an issue for the moment.

[Ken2k7]

I'd prefer to do this with PHP so that handling is done server-side, before the page begins loading. In any case, it shouldn't be an issue for the moment.

Right, but are your data stored in the database? You can't do this with PHP otherwise.