如何使用图像jquery tablesorter对表进行排序

Question

我正在尝试对表列进行排序,无论它是否包含img.所以我的表格html看起来像这样:

<table>
<thead>
<th>One</th><th>Two</th><th>Three</th>
</thead>
<tbody>
<tr>
<td><span class="raw"><img src="path/to/image.png" /></span></td>
<td><span class="raw">text 1</span></td>
<td><span class="raw">text 2</span></td>
</tr>
<tr>
<td><span class="raw"></span></td>
<td><span class="raw">text 4</span></td>
<td><span class="raw">text 5</span></td>
</tr>
<tr>
<td><span class="raw"><img src="path/to/image.png" /></span></td>
<td><span class="raw">text 22</span></td>
<td><span class="raw">text 111</span></td>
</tr>
</tbody>
</table>

我如何对表结构进行排序？对于排序的最终结果,在顶部或底部具有图像的列,反之亦然

我正在使用这个插件:

http://tablesorter.com/docs/

Answer 1

Tablesorter是一个很棒的插件 - 你可以通过"alt"文本对图像进行排序,通过定义你自己的文本提取函数,如下所示:

$("#table_id").tablesorter({
    textExtraction:function(s){
        if($(s).find('img').length == 0) return $(s).text();
        return $(s).find('img').attr('alt');
    }
});

不包含图像的单元格将按文本排序.

(*)相信jQuery论坛的答案

Answer 2

$("table").tablesorter().on("sortStart",function() { 
                  //prepend a sortable string before the image
            }).on("sortEnd",function() { 
                  //remove added string
         });