Skip navigation
Oby1KnOby
Currently Being Moderated

How to make a sortable images table?

Jun 29, 2012 2:56 AM

Tags: #cs4 #help #image #dreamweaver #images

Hey guys, I wonder if anyone knows how to create a table which will include images instead of numbers, and which somehow can be sorted accordingly to an image length/number. Any ideas how I can do that? 

This is the code I use for table:

 

<td><span style="display: none">7</span><img src="images/7.png" /></td>

 

Here is the table:

table.jpg

So as soon as users cklick on quality, passion etc the table should sort the pictures correctly.

 
Replies
  • Currently Being Moderated
    Jun 29, 2012 5:06 AM   in reply to Oby1KnOby

    Create an XML file, either manually or created from a database. The XML file (untitled.xml) should look like

     

    <?xml version="1.0" encoding="utf-8"?>
    <products>
        <product>
            <name>Product 1</name>
            <price>400</price>
            <quality>95</quality>
            <passion>80</passion>
            <level>55</level>
            <satisfaction>85</satisfaction>
            <help>100</help>
        </product>
        <product>
            <name>Product 2</name>
            <price>380</price>
            <quality>70</quality>
            <passion>81</passion>
            <level>45</level>
            <satisfaction>90</satisfaction>
            <help>67</help>
        </product>
        <product>
            <name>Product 3</name>
            <price>560</price>
            <quality>47</quality>
            <passion>67</passion>
            <level>57</level>
            <satisfaction>89</satisfaction>
            <help>99</help>
        </product>
    </products>
    

     

    Then create the markup as per

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div spry:region="ds1">
      <table>
        <tr>
          <th spry:sort="name">Name</th>
          <th spry:sort="price">Price</th>
          <th spry:sort="quality">Quality</th>
          <th spry:sort="passion">Passion</th>
          <th spry:sort="level">Level</th>
          <th spry:sort="satisfaction">Satisfaction</th>
          <th spry:sort="help">Help</th>
        </tr>
        <tr spry:repeat="ds1">
          <td>{name}</td>
          <td>{price}</td>
          <td>{quality}</td>
          <td>{passion}</td>
          <td>{level}</td>
          <td>{satisfaction}</td>
          <td>{help}</td>
        </tr>
      </table>
    </div>
    <script src="http://labs.adobe.com/technologies/spry/includes/xpath.js"></script>
    <script src="http://labs.adobe.com/technologies/spry/includes/SpryData.js"></script>
    <script>
    var ds1 = new Spry.Data.XMLDataSet("untitled.xml", "products/product");
    ds1.setColumnType("price", "number");
    ds1.setColumnType("quality", "number");
    ds1.setColumnType("passion", "number");
    ds1.setColumnType("level", "number");
    ds1.setColumnType("satisfaction", "number");
    ds1.setColumnType("help", "number");
    </script>
    </body>
    </html>

     

    and test in your favourite browser.

     

    Once you have done that, the next step is to create a bar to represent the numbers. You can do that by changing the width according to the number value using the Spry element selector http://labs.adobe.com/technologies/spry/articles/element_selector/

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2012 7:02 PM   in reply to Oby1KnOby

    The following works in all browsers with the exception of IE

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    th, td {
        width: 100px;
    }
    .results_bar {
        background-color: #039;
        color: #039;
        height: 20px;
    }
    </style>
    </head>
    
    <body>
    <div spry:region="ds1">
      <table>
        <tr>
          <th spry:sort="name">Name</th>
          <th spry:sort="price">Price</th>
          <th spry:sort="quality">Quality</th>
          <th spry:sort="passion">Passion</th>
          <th spry:sort="level">Level</th>
          <th spry:sort="satisfaction">Satisfaction</th>
          <th spry:sort="help">Help</th>
        </tr>
        <tr spry:repeat="ds1">
          <td>{name}</td>
          <td>{price}</td>
          <td><div class="results_bar" style="width: {quality}px">{quality}</div></td>
          <td><div class="results_bar" style="width: {passion}px">{passion}</div></td>
          <td><div class="results_bar" style="width: {level}px">{level}</div></td>
          <td><div class="results_bar" style="width: {satisfaction}px">{satisfaction}</div></td>
          <td><div class="results_bar" style="width: {help}px">{help}</div></td>
        </tr>
      </table>
    <script src="http://labs.adobe.com/technologies/spry/includes/xpath.js"></script>
    <script src="http://labs.adobe.com/technologies/spry/includes/SpryData.js"></script>
    <script>
    var ds1 = new Spry.Data.XMLDataSet("untitled.xml", "products/product");
    ds1.setColumnType("price", "number");
    ds1.setColumnType("quality", "number");
    ds1.setColumnType("passion", "number");
    ds1.setColumnType("level", "number");
    ds1.setColumnType("satisfaction", "number");
    ds1.setColumnType("help", "number");
    </script>
    </div>
    </body>
    </html>

     

    Hopefully I can find a solution for IE.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 6:22 AM   in reply to Oby1KnOby

    Add a class to the row as in

    <tr class="sortable">

      <th spry:sort="name">Name</th>

      <th spry:sort="price">Price</th>

      <th spry:sort="quality">Quality</th>

      <th spry:sort="passion">Passion</th>

      <th spry:sort="level">Level</th>

      <th spry:sort="satisfaction">Satisfaction</th>

      <th spry:sort="help">Help</th>

    </tr>

    and a litlle styling as per

    .sortable th {

        cursor: pointer;

    }

     

    Gramps

    Still no solution for IE

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 6:08 AM   in reply to Oby1KnOby

    You are using the latest version of Spry (1.6.1)

     

    The issue is that IE see the Spry value used in CSS as an error, hence it does not process same.

     

    Have a look here http://forums.adobe.com/thread/266960

     

    You might like to PM Kinblas for a solution. I have spent about two days on it already.

     

    Good luck

    Gramps

     

    PS If you find a solution, please report back here so that I can learn.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points