jQuery 表格分类器 - 图片

Question

我有一个包含三列的，我正在使用 jQuery tablesorter 对这些列进行排序。下面列出了 table 的代码。其中一列是 "yes/no" 字段，但我显示的是 "thumbs-up/thumbs-down" 图像。我想按 "yes/no" 值排序，同时仍显示 "thumbs-up/thumbs-down" 图像。我如何在使用 tablesorter 时实现这一点？

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code><script type="text/javascript">
  $(function() {
      $("#myTable").tablesorter();
  });
</script>

<table id="myTable" class="tablesorter">
        <thead>
            <tr>
                <th>Subscription Product Name</th>
                <th>Type</th>
                <th>Has Fees</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var categories in Model.Categories)
            {
                foreach (product p in categories)
                {
                    <tr>
                        <td>
                            @p.name
                        </td>
                        <td>
                            @p.type
                        </td>
                        <td>
                            @DisplayThumbsUpDown(p.hasfees)
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
  
    @helper DisplayThumbsUpDown(HasFees fees)
    {
        switch (fees)
        {
            case HasFees.Yes:
                    <img src="/lib/images/thumbs-up.png">break;
            case HasFees.No:
                    <img src="/lib/images/thumbs-down.png">break;
            default:
                    <span>&mdash;</span>break;
        }
    }

Answer 1

在图片标签中包含 alt 属性，例如

<img src="/lib/images/thumbs-up.png" alt="0">
<img src="/lib/images/thumbs-down.png" alt="1">

并使用

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

参考：https://forum.jquery.com/topic/tablesorter-sort-image

jQuery 表格分类器 - 图片

jQuery tablesorter - images

javascript

jquery

tablesorter