3 Replies Latest reply: Jun 26, 2012 12:04 PM by Oby1KnOby RSS

    Images for sortable table

    Oby1KnOby

      Hello again!

      I was able to impliment a sortable data table to my website by using Spry Data Set.

      However I want to use hirozontal graphical images insted of numbers. So for example instead of number 45 I want to have a 45px long horizontal graphic image, insted of number 95 a 96px long pgraphical image etc.

       

      My question is how do I make the sortable dable work with the graphical images instead of numbers? There should be a way around it.

       

       

      Here is my table now:

       

       

      <div spry:region="ds1">

        <table>

          <tr>

            <th spry:sort="Name"style="cursor:pointer">Name</th>

            <th spry:sort="Price"style="cursor:pointer">Price</th>

            <th spry:sort="Quality"style="cursor:pointer">Quality</th>

            <th spry:sort="Satisfaction" style="cursor:pointer">Satisfaction</th>

          </tr>

          <tr spry:repeat="ds1" spry:odd="odd" spry:even="even">

            <td>{Name}</td>

            <td>{Price}</td>

            <td>{Quality}</td>

            <td>{Satisfaction}</td>

          </tr>

        </table>

      </div>

       

       

      <table width="262" height="142" border="1" id="products">

        <tr>

          <td width="70">Name</td>

          <td width="58">Price</td>

          <td width="53">Quality</td>

          <td width="83">Satisfaction</td>

        </tr>

        <tr>

          <td>Product1</td>

          <td>400</td>

          <td>9</td>

          <td>1</td>

        </tr>

        <tr>

          <td>Product2</td>

          <td>500</td>

          <td>6</td>

          <td>4</td>

        </tr>

        <tr>

          <td>Product3</td>

          <td>700</td>

          <td>3</td>

          <td>8</td>

        </tr>

        <tr>

          <td>Product4</td>

          <td>250</td>

          <td>2</td>

          <td>9</td>

        </tr>

      </table>