使用Stupid-table-plugin对图像进行排序

时间:2013-08-22 10:56:24

标签: javascript sorting jquery-plugins html-table

我正在使用jquery 插件Stupid-table 订购一个表。 文本和数字排序正确但现在我想订购三张图片: 01.jpg,02.jpg和03.jpg 。我的表的代码如下:

<table id="ranking">
<thead>
   <tr>
      <th data-sort="string">Name</th>
      <th data-sort="medall">Medal</th>
      <th data-sort="string">Año</th>
   </tr>
</thead>
<tbody>
    <tr>
       <td>Belmonte, Frank</td>
       <td><img src="01_medal_gold.png" alt="Gold"></td>
       <td>2012</td>
    </tr>
    <tr>
       <td>Smith, Adam</td>
       <td><img src="02_medal_silver.png" alt="Silver"></td>
       <td>2009</td>
    </tr>
    <tr>
       <td>Riva, Emma</td>
       <td><img src="03_medal_bronze.png" alt="Bronze"></td>
       <td>2013</td>
    </tr>
</tbody>
</table>

你能告诉我如何用插件订购这三张图片吗?

1 个答案:

答案 0 :(得分:0)

使用图像向表格单元格添加data-sort-value="...",然后为此类型添加自定义排序算法。

<tr>
   <td>Riva, Emma</td>
   <td data-sort-value="3"><img src="03_medal_bronze.png" alt="Bronze"></td>
   <td>2013</td>
</tr>

$("table").stupidtable({
    medall: function(a, b) {
        // sort algorithm...
        return parseInt(a, 10) - parseInt(b, 10);
    }
});

fiddle