我有一个三列,我正在使用 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>—</span>break;
}
}</code></pre>
</div>
</div>
最佳答案
在图像标签中包含 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');
}
});
关于javascript - jQuery 表排序器 - 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38927237/