Email This Post Email This Post Print This Post Print This Post

Sort Lock Table

Sun, Oct 7, 2007 – 8:09 am

Easy-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

Demo Link

  1. 17 Responses to “Sort Lock Table”

  2. 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

  3. Hmm…. I’ve not encountered this before. Do you have a link to a page demonstrating the problem ?

    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

  4. 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

  5. Dang - wish I could see the source code. It almost looks like one of the tables does not have a TBODY tag, or is missing a /TBODY tag. Or maybe it’s missing the TableContainer DIV tag?

    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

  6. 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

  7. 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

  8. Where can i find the sortTable.js file?
    Thanks

    By cowarish on Nov 13, 2007

  9. “Where can i find the sortTable.js file?”

    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

  10. 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

  11. Laura,

    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

  12. Thank you Stan.

    That’s it, It workssss

    Thank you very much

    By Laura on Jul 2, 2008

  13. Thank you very much

    It workssssssssssss

    Laura

    By Laura on Jul 2, 2008

  14. 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

  15. Martin,

    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

  16. 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

  17. 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

  18. Interesting Martin. So you essentially added a a new type of item to the FormatForType function in sortTable.js

    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

Post a Comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word