Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with Sort Table JavaScript? 1

Status
Not open for further replies.

Happy100

Technical User
Jun 25, 2004
102
GB
Hi

I have kindly been given an example of a JavaScript to sort tables. -

I have added the script to my page above. I've got it to work,
all except the Weekly Rates column and I think that because
I have numeric and text on the same column.

Can anyone advise what JavaScript code change is needed for this?

Many thanks

Happy
 
Take a look at this code:

Using JavaScript And DOM to Sort a Table faq216-3599

You will see that the code determines the datatype of the column and sorts based on that.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Hi mwolf00

Many thanks for the referal link, it's just the job! :)
However, I'm very new to Javascript and I want to add another column.
Do I just create the column and hyperlink the the word in the top row with 'javascript: sortTable(4)', ie just keep adding the next number in the brackets per row?
Or does the number in the brackets tell the script how to sort it?

Many thanks

Happy.
 
All you need is 'javascript: sortTable(4)' and so on. The code will look at each input in the row and attempt to turn it into a Date type, if it fails, it trys to turn it into a number, if that fails, it assumes text. Once one field is determined to be text, the whole column is sorted as such. If none are text, but at least one is numeric, the whole column is sorted as such. If nothing but dates were found, then that is used for the sort...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Hi again,

I have two tables on my pages, is there a way to get both tables working with the sort javascript on the same page?

Also I have a column with mixed alpha and numerical values. eg. 100 - 300, From 90.00, From 195.00 and the script see's the 100 - 300 and From 195.00 as lower values than From 90.00.
Is there a way to change this in the script?

Many thanks

Happy.
 
You can make it work with more than I table by using a second parameter...

Code:
'javascript: sortTable(4[blue],"tableIDgoesHere"[/blue])'
then inside of sortTable, you need to change

Code:
function sortTable(col[blue], inTable[/blue]){
    [red]// some lines omitted for clarity[/red]
    allTR = document.getElementById([blue]inTable[/blue]).childNodes[0].childNodes

As for mixed value columns, they will be sorted as text - try to see if you can change the way the data is listed...



Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Sorry to be a pain, I'm pretty new to Javascript!

Could you advise me on the exact location for these two extra pieces of script?
Does the first go in the html body and the second in the script somewhere?

Many thanks

Happy.
 
Ok, I think I've worked out where the inTable code is added to the script, still not sure about the 'javascript: sortTable(4,"tableIDgoesHere")' though?

:)
 
Code:
<table id=[blue]"dataTable1"[/blue] border=1 cellspacing=0>
<tr>
    <th><a href="javascript: sortTable(0, [blue]"dataTable1"[/blue])">Data Field</a></th>
    <th><a href="javascript: sortTable(1, [blue]"dataTable1"[/blue])">Number Field</a></th>
    <th><a href="javascript: sortTable(2, [blue]"dataTable1"[/blue])">Date Field</a></th>
    <th><a href="javascript: sortTable(3, [blue]"dataTable1"[/blue])">Mixed Field</a></th>
</tr>
..
..
..
</table>

<table id=[blue]"dataTable2"[/blue] border=1 cellspacing=0>
<tr>
    <th><a href="javascript: sortTable(0, [blue]"dataTable2"[/blue])">Data Field</a></th>
    <th><a href="javascript: sortTable(1, [blue]"dataTable2"[/blue])">Number Field</a></th>
    <th><a href="javascript: sortTable(2, [blue]"dataTable2"[/blue])">Date Field</a></th>
    <th><a href="javascript: sortTable(3, [blue]"dataTable2"[/blue])">Mixed Field</a></th>
</tr>
...
...
...
</table>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Code:
	<th><a href="javascript: sortTable(0, [blue]'dataTable1'[/blue])">Data Field</a></th>
	<th><a href="javascript: sortTable(1, [blue]'dataTable1')[/blue]">Number Field</a></th>
	<th><a href="javascript: sortTable(2, [blue]'dataTable1'[/blue])">Date Field</a></th>
	<th><a href="javascript: sortTable(3, [blue]'dataTable1'[/blue])">Mixed Field</a></th>
	<th><a href="javascript: sortTable(4, [blue]'dataTable1'[/blue])">Rooms</a></th>

Sorry about that. Wasn't paying enough attention to context - you need single quotes around the second parameter since the call is in double quotes...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Hi and a big thanks for that, I have one more little challenge, if anyone can help me figure this out?

All the script works a treat, but I have a column with mixed values that just don't work out right, please see -

The pricing columns need to show as low-high/high-low prices, but at the moment they are all over the place, because of the mixed values, which can't really be changed.
So I would imagine the script need to be altered, if possible?

Many thanks

Happy.
 
Is there any way to normalize the input? For instance, could you give the least expensive set 1 (£) sign and the most expensive 5 (£££££)?


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
I'm not too sure what you mean with the (£)signs, here is a good example of one of the 100's of pages I would need to use it on -

I could change it, so all the From prices read prices+ eg. 195.00+, instead of From 195.00?
Not sure if that helps though?

Also I've been told it doesn't seem work on other browsers, other than IE?

Am I asking too much for this to be possible to work?

Thanks, Happy.
 
Can you label the column "Weekly Rates From" and then just include one number making the column numeric? If not, the column will be seen as text and the only way to make it sort correctly would be to put a "0" in front of the 2-digit prices which wouldn't look too good...

"045"
"095"
"125"

I will see why the code doesn't run in NetScape and get back to you...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
Yes, I could change the Self Catering section to weekly from prices eg. But the script see's 95.00 as a higher value than 195.00?

But I would have more problems with the serviced section as these are priced with different values, eg some as room rate and some per person per night.
I take it, it's not possible for the script to ignore alpha char and only look at the numerical?

Many thanks, Happy.
 
Happy,

The code is written to try to figure out the best way to sort. You could write a similar code that does not try to do that and pass a parameter to that function indicating the best way to sort the column. The current code that you are using is limited in that as soon as any non-numeric data is detected, the whole column is sorted as text and, in text, "95" is greater than "195" but "095" is less than "195". The advantage of the code is that it is very easy to implement on normalized data whereas a function requiring you to tell it how to sort would be less easy (but not undoable).

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
won't do it for a fee - not on this site - will try to post it here soon.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 
mwolf00

That is really very good of you!
I promise you, your time and effort it is very much appreciated! :)

If you need any info from me, please let me know.

Many thanks

Happy.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top