dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Sorting a table by a column that contains image icons

  1. #1
    Join Date
    Jul 2010
    Posts
    5

    Unhappy Sorting a table by a column that contains image icons

    Hi,
    I'm using this sort-table that relies on MooTools.
    http://phatfusion.net/sortabletable/

    I have one column that contains image icons. I'd like to sort them (perhaps by the "id" attribute), but I'm new to Javascript and don't understand what I'm seeing in the js files enough to customize it. Can anyone make a recommendation? Thanks!

  2. #2
    Join Date
    Apr 2010
    Posts
    121
    I would try using css, perhaps a div to hide text. For example, You have an image, and some text underneath it, but that text is invisible. There may be a better way to do it but I'm a student and still learning too. You wouldn't consider making the text really really small, and perhaps transparent using css?

    Anyone else?

    I have never seen this done before. I also have a bad feeling that if you make one column sort by ID, it may result in all of the other columns sorting by ID.

    Well, you can't say I didn't try. Best of luck to you. I will be watching this topic. I'd like to hear your input.

  3. #3
    Join Date
    Jul 2010
    Posts
    5
    Your idea works! I had to put it before the image tags though as the Javascript was looking for a string.

    HTML Code:
    <span class="hidden">Image Description</span>
    HTML Code:
    CSS
    .hidden
    {
    	display:none;
    }
    THANK YOU!!!!

  4. #4
    Join Date
    Jul 2010
    Posts
    5
    Wait...it stopped working when I put text before all of the images??!?! Hmmmm.

  5. #5
    Join Date
    Jul 2010
    Posts
    5
    Okay...think I know what was happening.
    The sorting function was reading the text string up until the first non-string (<img>) tag. So in the hidden class, I put a list of the subsequent icons like this:
    HTML Code:
    <td>
    <span class="hidden">IconA, IconD, IconF</span><img src="#" id="IconA"><img src="#" id="IconD"><img src="#" id="IconF">
    </td>
    <td>
    <span class="hidden">IconA, IconB, IconG</span><img src="#" id="IconA"><img src="#" id="IconB"><img src="#" id="IconG">
    </td>
    If anyone can think of a better way, please chime in, but at least this works!!! Thanks again, SMTS!

  6. #6
    Join Date
    Apr 2010
    Posts
    121
    Glad to help!

  7. #7
    Join Date
    Jul 2010
    Posts
    5
    I had to revert back to text-only (no icons)...I don't know what the function was sorting, but it wouldn't work on hidden elements. I'm happier with functionality- plus it's inspiration to learn Javascript better!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles