|
What do you mean by the "latest script may have this working"? I tried the 3 scripts at your tripod.com page and the one on this page and none of them produced the hourglass effect.
John Rogers
www.cerberus.vze.com
|
|
|
|
|
Hi, John
Sorry about the confusion. Give it a try again. Use the SLOW/FLEXIBLE.
Regards,
- Han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
Thanks Han. It is now only necessary to click on the heading to sort & resort. An even better script.
John Rogers
www.cerberus.vze.com
|
|
|
|
|
Its a great script. At first I could not run tablesort with some other scripts that also use body onload.
To solve this problem I have removed the line:
and added:
just before
the off.gif is just a blank gif and anything would do given its small size.
Now I can run it with my other scripts.
John Rogers
www.cerberus.vze.com
|
|
|
|
|
I was really excited to find this script, but I have a different table that is a mix of text and buttons with links.
I know almost nothing about Javascript (I got some books from the library today), so I found out that arrays can also handle images and links.
Any plans of adding a feature that incorporates images and links to the sort arrays?
THANKS,
Janet Mongilio
|
|
|
|
|
Hi, Janet
The script should handle any object(s) inside a cell. So, it should work with images/links etc. Are you referring to something else?
Let me know.
Regards,
- Han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
Thanks very much for answering... I'll keep trying in case I'm doing something wrong (which is highly likely since I'm new to javascript)...
I'll post again if I get completely stuck !!
Janet
|
|
|
|
|
Ok, I think I'm stuck... I'm trying to copy the code and examples that you have to a Homestead page to see if I can duplicate that before I try it on my other pages.
Here's the source code of a blank page with no code added at all:
<title>trial
How do I change the
line so that it will work when the above code is already added by default?
And one more question: can the sortTable.js be added as an external file, or does the code actually have to be copied into the body?
Thanks again for your help with my novice questions,
Janet
|
|
|
|
|
<body LINK=#3333cc VLINK=#6633cc BGCOLOR=#ffffff onLoad='initTable("table0");'>
<SCRIPT SRC="sortTable.js">
</SCRIPT>
The onload portion of the body onload tag goes in the body tag (as above, space before onload)
Then comes the reference to the js file. The js file is itself a seperate file and goes in the same directory as the file with the table.
John Rogers
www.cerberus.vze.com
|
|
|
|
|
Nice bit of coding. Good structured layout and well commented.
Only slight hitch I had was that when your code creates a new date object given the string 09/10/2002. It assumed that this is in US format of mm/dd/yyyy and translates to 10th September 2002. However I use the UK format of dd/mm/yyyy and needed it to translate to 9th October 2002.
I simply added a UKtoUS_converter function to switch my dates. This might be a nice option to have as a configurable variable at the start.
All in all, Nice one mate!
Paul Goddard
|
|
|
|
|
It is difficult for the users to know they are able to click on the column names to sort the table. How can this be addressed?
In addition, when the user clicks on a column header, the cursor does not change to a 'wait' cursor. How can this be included?
Pardon, my lack of js experience.
|
|
|
|
|
As for your 1st question, I'm not sure what else is required. At the moment, when the mouse moves over a sortable column, its pointer becomes a "hand" and the window's status bar says something like "Sort by ...".
As for your 2nd issue, that can be done by modifying one of the routines. The method that's called when you click on the sortable column is "sortTable". So, I think adjusting the pointer type at the beginning and the end of the this method will probably address the problem.
If I come up with a quick solution for the 2nd issue, I'll post the new script ASAP.
Regards,
- Han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
I've had several users tell me that it isn't obvious that the columns are sortable (nothing to tell them) unless they happen to scroll over the header. I personally, usually don't notice the status bar text either. Maybe some small up/down gifs that appear before the column is sorted. Or perhaps making the headers some sort of link but with a different look and feel than 'typical' links.
|
|
|
|
|
I see. I guess that's very possible. Having different look and feel can probably be accomplished in the HTML sources. Ummm ... guess, one can use hint popups instead of status bar to draw more attention. Having up/down image before the sort can also be done though this needs a bit of mods to the code. The code already does default sorting upon loading (see doSortUponLoad and defaultSortColumn variables) but I don't think it draws any arrows. Images can be used instead of up/down chars (see
useImg, ascChrFile, desChrFile variables).
Anyways, all valid points ...
- Han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
|
Hi, I've just incorporated your Javascript into a database-driven JSP page. As long as there are just 50 or so rows, all works reasonably well. However, around 100-200 rows the sorting takes a significant amount of time: 10 or 20 seconds per column on my PII-400 w/392MB of RAM. Around 500 rows or more the browser doesn't even finish completely loading but rather it locks up, eating up my CPU and RAM. The former problem might be taken care of using a more robust sorting algorithm, the latter problem seems to reflect on initTable() itself.
I don't mean to 'rain on your parade'. It's a nice application. You seem sincere about wanting to keep improving it. If I can help I will. I probably won't have time at work, but I want to write an advanced Javascript book, and this could provide an interesting case study.
|
|
|
|
|
I have 3 different implementations posted at my web site:
http://www.geocities.com/sc_hanyu/javascript/sorttable.html
The one posted at codeproject uses delete/insertCell to redraw tables and that takes a long time. As for sorting algorithm, I agree that there could be a way to improve it, but what I do is pretty simple using generic algorithm provided by Javascript, so things should be ok. As for locking up your computer, I'm not sure what's happenning. It could very well be the script ...
Don't worry about 'rain on your parade'. I don't mind. I'm also here to learn new stuff and expriment with different technology. So, as far as I'm concerned, I welcome any comments both positive and negative.
Regards,
- Han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
Wow, this is an awesome piece of work. I just realized that IE 5 has a whole bunch of new features, functions, etc... NN6 also has a whole bunch of new stuff but they went too overboard that they forgot to be backward compatible... things that used to work on NN4x no longer work on NN6, so NN in my opinion is out of the game. IE is the Undisputed Heavyweight Champion of the Browser Wars!! Not only because the Javascript engine is so much better, and not only that its the only browser capable of handling XML, ActiveX, Automation, blah blah blah... but finally, it handles HTML errors gracefully and allows for full controll of such errors (the error handling kicks ass).
Well, im probably starting to annoy you so ill say my farewell and congradulate you for such a magnificent piece of work.
MoMad the NoMad
|
|
|
|
|
Yeah, the browsers have come a long way ... and IE has come even longer way.
I was really glad that the code worked at first try on Netscape after a minor
adjustment. If it didn't, I really would have not known what to do.
It would have been quite challenging to develop/debug the code for Netscape.
In any case, thanks for your generous comments.
- Han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
Hi there, this piece of code is really good,
but it doesn't sort the amount column properly ,
so I need some advice like how to sort a column containig amount which has data like ---- 1.200.00 , 4,889,888.00
|
|
|
|
|
Hello,
I haven't tested with those particular formats ... but the key is
in the function compare. As you can see, I'm also handling date as
special data with isDate function to determine whether the inputs are
both Date format. You can do the similar thing with these types of
data ... First, you need to figure out how you can compare and then
you need to modify compare function so that if both inputs are of
this type, it does the right thing.
Hope this helps.
Good luck.
- han
http://www.geocities.com/sc_hanyu/
|
|
|
|
|
having the same problem with the numerical sort
checkout
http://www.rosefame.co.uk/torrevieja/apart.html[^]
its a property site with porperty prices on it and since the prices do not share the same number of characters in them, they do not sort correctly.
An ascending order sort give the prices with the least number of character ie <1000 which is fine, then the greatest values ie >over 100,000 and then sorts the rest.
please advise, im not a javascript programmer so an answer in plain english would be great
Neil
|
|
|
|
|
http://javascript.internet.com/messages/check-sorter.html
http://www.romankoch.ch/capslock/tablesort.htm
Adrian Bacaianu
|
|
|
|
|
I tried this script on one of our pages. VERY NICE!
It appears, however, you use the "Simple Table Model" to determine the headings.
We use the "Complex Table Model" which adds the <THEAD> and <TFOOT> and puts the <TH> in those sections.
The <TFOOT> headings get sorted with the data even though they are between the <TH></TH>.
I'd like to keep the footers. Any suggestions?
Ive included a sample below.
<table id="table0" border="6" cell padding="4" cellspacing="1"
bgcolor="#00FFFF" bordercolordark="#008000" bordercolorlight="#00FF00" style="FONT-SIZE: x-small">
<thead>
<tr>
<th>Coil</th>
<th>Location</th>
<th>Mill Area</th>
<th>DateTime Into Inventory</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">248089</td>
<td align="center">S2708L</td>
<td align="center">HCS</td>
<td align="center">2002-03-10 19.34.40</td>
</tr>
<tr>
<td align="center">265588</td>
<td align="center">S0511L</td>
<td align="center">HCS</td>
<td align="center">2002-02-24 08.50.34</td>
</tr>
<tr>
<td align="center">277423</td>
<td align="center">S8901L</td>
<td align="center">HCS</td>
<td align="center">2002-02-24 02.27.16</td>
</tr>
<tr>
<td align="center">280175</td>
<td align="center">S2003L</td>
<td align="center">HCS</td>
<td align="center">2002-02-28 00.47.59</td>
</tr>
<tr>
<td align="center">286938</td>
<td align="center">S2405L</td>
<td align="center">HCS</td>
<td align="center">2002-03-09 05.56.07</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Coil</th>
<th>Location</th>
<th>Mill Area</th>
<th>DateTime Into Inventory</th>
</tr>
</tfoot>
</table>
|
|
|
|
|
Yeah ... good question.
Well, the quick and dirty solution is to let the script assume that the last row is the footer I don't know at the moment as to how I can treat these tags properly. I'll have to look into this.
In the meantime, if you are up for quick/dirty solution, then you can simply change a line in the initTable:
Look for the line in initTable method:
for (var i=0; i
|
|
|
|