Email This Post
Print This Post
Sort Lock Table
Sun, Oct 7, 2007 – 8:09 amEasy-to-implement script creates tables that allow the body to scroll while the column headers remain fixed in place.
Scroll up and down or click on the column titles to sort the table. Easy to use. Tested to work in IE6 and Firefox
17 Responses to “Sort Lock Table”
Hello,
First thank you for this script, I have utilized it and it works great. However, I ran into a problem when I tried to create multiple tables with this in IE. I have 4 tables created with this, that are separated by a line break. Sometimes when the tables load, the header of a lower table would jump up underneath the header of a table above. It only happens in IE, and only about 80% of the time. I am not sure what could be wrong with it. Any help would be appreciated.
By Dennis on Oct 22, 2007
What version of IE were you using IE7 or IE6 ?
Note: According to “TheCounter.Com” IE6 still provides about 50% of the browser market:
http://www.thecounter.com/stats/2007/September/browser.php
By Stan Slaughter on Oct 22, 2007
Hi Stan, thanks for answering my post. Unfortunately I do not have a link to the site. I can post an image of it however, and it is on IE7.
The screenshot is at http://i3.photobucket.com/albums/y62/kewldingo/tablebug.jpg
As you can see, the Contact History header is scrolled under the Quote header. Each of the tables has a unique id, with the same class name. And they’re each in a div that’s separated by a line break (). I applied a simple fix by calling the click event on the first header when the table loads. I can see the headers jump from the bugged position to its right position on page load, but it does the trick for now.
By Dennis on Oct 23, 2007
Check to make sure both tables has all thier TABLE THEAD, TBODY, TR, and TD pairs. Also verify that they all have matching closing tags. In some browsers a missing /TR or /TABLE is inserted for you and on some it just messes up the table.
Here’s an example with two tables. I just copy/pasted the top table and changed the columns. It works for me, hopefully it works for you as well:
http://www.stansight.com/sort/LockTableHeadSortTEST.html
By Stan Slaughter on Oct 23, 2007
Hello,
I looked over the code, yet I cannot get the java script to read when I open the HTML source code on my machine (running IE 7 I believe). How come this doesn’t work?
I am a complete programming dummy, who was thrust into this recently…
Do I need to define the CSS and JS code? Or perhaps separate it from the HTML source? Any help would be much appreciated, as I have spent many hours trying to figure this out.
By Brendan on Nov 9, 2007
Just to follow up on my question…
I see where I need to imbed GIF images and so forth.
Perhaps I need to import my java script for table sorting. I know nothing about java coding, but did find a script on the web. Unfortunately, I cannot merge it with a fixed header, scrollable table. Here is what I have available online: http://www.wayland.ma.us/surveying/maps.html
By Brendan on Nov 9, 2007
Where can i find the sortTable.js file?
Thanks
By cowarish on Nov 13, 2007
If you visit the Demo Link and view source it will give you the name, but here is the direct link:
http://www.stansight.com/sort/sortTable.js
P.S.
When I have the time I’ll do a better write up on the Sort table and all it’s parts. I was getting so many requests about it though I just wanted to make sure it was out there for people to grab.
Now - to just find the time :)
By Stan Slaughter on Nov 14, 2007
Your Sort Lock Table doesn’t work with firefox 3
Reply to all
Forward
Reply by chat
Filter messages like this
Print
Add to Contacts list
Delete this message
Report phishing
Report not phishing
Show original
Show in fixed width font
Show in variable width font
Message text garbled?
Why is this spam/nonspam?
Laura Martinez
to Stan_Slaughter
show details 11:00 AM (1 minute ago)
Reply
Hello
I\’m looking for a sort table, but I\’ve got firefox 3 and your sort table demo doesn\’t work with firefox3.
Are you going to review your sample? I\’m very interesting on it.
Thank you in advance
Laura
Reply
Forward
By Laura on Jul 1, 2008
I’ve not had a lot of time this morning to look into this, but I think that all you need do is to add
overflow-y:auto;
To the div.TableContainer class. So it looks like this:
div.TableContainer {
border:1px solid #7DA87D;
overflow-y:auto;
}
Let me know if this works for you. I’ll also try to look into this more deeply tonight when I get home.
By Stan Slaughter on Jul 1, 2008
Thank you Stan.
That’s it, It workssss
Thank you very much
By Laura on Jul 2, 2008
Thank you very much
It workssssssssssss
Laura
By Laura on Jul 2, 2008
Using the sorting script, works a treat. However I have some data of the following format.
For example:-
(3c, 4a, 5b, 4b, w, 5c,4c) that needs to be sorted by number then by letter
E.g. (w, 3c, 4c, 4b, 4a,5c)
Where w is the lowest value then 1c, 1b, 1a, 2c,2b,2a,3c,3b,3a etc up to 5a being the highest.
This will not sort- I did think maybe converting the letters to numbers and then sorting numerically so w=0 c=1 b=2 a=3 but could not see how to do it?
Any ideas?
Martin
By Martin on Jul 3, 2008
The problem you are having is that letters without numbers are single characters. Try placing a space or 0 in front of them and it should sort properly.
By Stan Slaughter on Jul 5, 2008
It sort of works. All sorted well by number then by letter. Unfortunately it is not the order I need.
This is what it does(using example data)- 2a,2c,4a,4b,4c,4c or reversed 4c,4c,4b,4a,2c,2a
What I actually need is the following
2c,2a,4c,4c,4b,4a or reversed 4a,4b,4c,4c,2a,2c
I need to keep the number order but reverse the letter ordering for these columns.
By Martin on Jul 6, 2008
Finally got it to work how I wanted.
I added this code to the function for modifying the values.
// If the item matches a mixed Letter/numeric pattern (e.g. 2a, 3c)
if (itm.match(/([1-5][abc]$)/) ||
itm.match(/([W]$)/)) {
// Replace letters or spaces with a number for sorting.
if (itm.match(/([W]$)/)){sortValue = itm.replace(/([W])/g,1);}
else if (itm.match(/(\d[a]$)/)){sortValue = itm.replace(/([a])/g,4);}
else if (itm.match(/(\d[b]$)/)){sortValue = itm.replace(/([b])/g,3);}
else if (itm.match(/(\d[c]$)/)){sortValue = itm.replace(/([c])/g,2);}
else if (itm.match(/()/)){sortValue = itm.replace(/()/g,-1);}
else {sortValue = sortValue;}
if (isNaN(sortValue)) {
// sortValue = sortValue.replace(/,/g,”);
sortValue = 0;
} else {
sortValue = parseFloat(sortValue);
}
}
It now seems to do exactly what I want without messing up the other sorting.
By Martin on Jul 13, 2008
One that would understand the unique content you wanted sorted in that column.
Nice solution to your problem. I’m glad you got it to work for you.
By Stan Slaughter on Jul 16, 2008