|
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
|
|
|
|
|
Han,
I had to change the "for (var i=0; i<nRow; i++)" in sortTable as well.
I was wondering if it would have been better to change "nRow = table.rows.length;" to
"nRow = table.rows.length - 1;" in initTable.
I am new to the world of JavaScript and haven't taken the time to learn how to write it yet, so bear with me when I ask questions.
One thing I see with both table models is the use of <TH> for true heading behavior. SO, when examining the table object, can rows with the <TH> be identified or is that lost once the table is generated?
The issue of the <THEAD> and <TFOOT> could be helpful, especially if you want to trigger the sort from either, but because of the simple model, the <TH> is not restricted to those areas. As I see it, the <TD> is really meant for the cell data.
You may just want to establish a few more rules for the use of this script.
Fred
|
|
|
|
|
Yup. Changing the table length will also do that job.
Yeah ... you have many good suggestions. I think it's time to make the script a bit smarter I'll see what I can do ... hopefully I can have something soon.
Thanks for your feedback!
- han
|
|
|
|
|
Hi there, this piece of code is really cool,
but I need some advice --> I got tables with
Dates in the following format : 12 Nov 2001
12 Jan 2001
12 Dec 2002
Your code doesn't work that cool on these !
Please I need your help !
ZDragon
|
|
|
|
|
Hi,
The sorting routine uses the literal string ... so the date data won't work ... In order to make it work, you will need to make some changes to the code. Here is one of the ways.
Look at the function "compare". As you may notice, the function is used to compare 2 inputs (i.e. a, b) and returns which one should is "bigger" (in sorting sense). I tried to take care of simple number inputs and strings (see the if statements with isNaN etc). You can write a few lines of code to handle date types. Javascript has Date objects which you can use to compare (<, >, = operators), so all you need to do is to:
1. First find out whether the inputs (a, b) are date types
2. If they are date types, create Date objects
3. Then, do the compare and return the results
There may be many ways to do this, but I'd probably modify the lines:
if (aToBeCompared < bToBeCompared) ...
to be something like:
if (isDate(a) && isDate(b)) // note you need to define isDate
{
// I HAVE NOT TESTED THIS CODE !!!
// convert a, b to date objects
Date aDate(a);
Date bDate(b);
// compare using date objects comparison operators
if (aDate < bDate)
if (!descending)
return -1;
else
return 1;
else if (aDate > bDate)
if (!descending)
return 1;
else
return -1;
return 0;
}
else
{
if (aToBeCompared < bToBeCompared) ...
no changes here ...
...
...
}
Hope this helps ... the most difficult is probably writing isDate as you need to account for all sorts of date format inputs. It may be sufficient to use Date constructor to see if it's in date format that Javascript recognizes. isDate is a function that determines whether a string input is in date format or not. It returns true if it's a date format, false otherwise. There may already be such function in Javascript
- Han
|
|
|
|
|
Hi
Thanx for the help,
I will let you know if there is
any other problems !
Thanx !
ZDragon
|
|
|
|
|
The latest should handle this ...
- Han
|
|
|
|
|
If you reverse the dates it sorts well. 2002-09-04 (y-m-d) you can also include year only and year circa eg 2001 c.
eg http://home.vicnet.net.au/~cerberus/crew.html#index
John Rogers
www.cerberus.vze.com
|
|
|
|