javascript - jQuery 表排序器 - 图像

Question

我有一个三列，我正在使用 jQuery tablesorter 对这些列进行排序。下面列出了该表的代码。其中一列是“是/否”字段，但我显示的是“拇指向上/拇指向下”图像。我想按“是/否”值排序，同时仍然显示“拇指向上/拇指向下”图像。使用 tablesorter 时如何实现此目的？

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><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;
        }
    }</code></pre>
</div>
</div>

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