11 Replies Latest reply: Jul 5, 2012 2:14 AM by Oby1KnOby RSS

    How to make a sortable images table?

    Oby1KnOby Community Member

      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.

        • 1. Re: How to make a sortable images table?
          Ben Pleysier CommunityMVP

          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

          • 2. Re: How to make a sortable images table?
            Oby1KnOby Community Member

            Gramps, I did what you said and the table with numbers is sorting properley.

            But I didn't quite understood how to replace the values of cells with praphical images? Where exactly do I need to insert my .png pictures, and what is the code for that?

            • 3. Re: How to make a sortable images table?
              Ben Pleysier CommunityMVP

              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

              • 4. Re: How to make a sortable images table?
                Oby1KnOby Community Member

                1. Thanks Gramps! I've replaced "background-color" wigth an image and it workos perfectly. H wever as you mentioned the table doesn't look properley in IE. So hopefully we can figure that out.

                 

                2. How can I make my sorting cells text to become visually cickable? Here is an example of what I want to acchive:

                hand.jpg

                So at the moment my mouse looks like I'm about to enter some text, wheras I prefer it to look like a pointing finger.

                How do I do that?

                 

                3. And one more thing, why does the style for this table only works when it is actually on the page. Whenever I put it in the styles.css file the whole thing brakes for some reason

                <style>

                th, td {  width: 100px; }

                .results_bar { background-image:url(images/10.png);  color:transparent; height:20px; }

                </style>

                • 5. Re: How to make a sortable images table?
                  Ben Pleysier CommunityMVP

                  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

                  • 6. Re: How to make a sortable images table?
                    Oby1KnOby Community Member

                    Gramps, thank you for note on cursor:pointer ! Looks good now!

                    So any ideas what can I do with IE? This is the only browser that brakes the whole thing down.

                    • 7. Re: How to make a sortable images table?
                      Oby1KnOby Community Member

                      Is there any palce where I can address this issue?

                      • 8. Re: How to make a sortable images table?
                        Oby1KnOby Community Member

                        Still no progress

                         

                        Ie TABLE.jpg

                        • 9. Re: How to make a sortable images table?
                          Oby1KnOby Community Member

                          Gramp, I have got a reply from IE Developers forum

                           

                          "Please provide a link to your website or publicly accessible mashup...spry is dynamically adding table rows to the DOM... your source code is useless to us... as far as I know there were fixes for IE9 that corrected dynamic table row addition... ensure you are using IE9 in standards mode... and you are using the latest spry version.

                          the cross browser solution is to use the datascr attribute of a table to load an xml file into table rows.

                          Probably you have changed IE's securtiy zone settings already in the hope of trying to get things to work... other browsers do not use the IE security zone model... when testing ensure they are set to the default (tools>Internet Options>Security tab, click "Reset all zones to default")"

                           

                          http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/76c38a24-9719-4edb-b 751-f02042fe62b7

                           

                          How do I know if I use the latest spry version? Do you think that might be an issue?

                          • 10. Re: How to make a sortable images table?
                            Ben Pleysier CommunityMVP

                            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.

                            • 11. Re: How to make a sortable images table?
                              Oby1KnOby Community Member

                              Here is what I got from the IE forum:

                               

                              "Tools>compatibility view settings... check "Include updated website lists from Microsoft", uncheck "Display all sites in compatibility view",  <- Done that didn't work


                              "if your target audience is on a corporate intranet, add the x-ua meta IE=edge to your page to force MSIE browsers to use Standards mode..." <-I have added <meta http-equiv="X-UA-Compatible" content="IE=edge" > after my <head> title didn't work as well, I have also tried using <meta http-equiv="X-UA-Compatible" content="IE=7.5" >


                              "I am not sure how you will get your page to display properly in IE7... that issue lies with the spry developers to debug.

                              you page displays fine in standards... except for a slight delay while the table is populated... in standards mode, but in IE7 emulation mode (F12>Document Mode) the table data is not rendered...

                              To debug your web page.. F12>Script tab, click "Start Debugging"... you can place breakpoints in the spry module to see how it works... examine the document.readState property when the spry module is called." <- Done the rebug didn't work for me

                               

                              Here is another discussion:

                              http://stackoverflow.com/questions/11340657/ie-doesnt-display-spry-table-properley