如何使用jQuery表格排序器对带有图片的表格进行排序

Question

我正在尝试对包含和不包含的表格列进行排序。所以我的表格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/

- Gandalf StormCrow

---

DataTables插件可能是您的一个不错的解决方案。它有很多出色的功能，可以直接使用，并且还有一个自定义排序插件 --- http://www.datatables.net/plug-ins/sorting - Batfan

@Batfan 谢谢，我现在没有选择新插件的奢侈，我只能让它工作。 - Gandalf StormCrow

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论坛提供此答案。

- Nimo

Answer 2

最简单的方法是将隐藏内容添加到图像单元格中(演示):

$(function () {
  $('table img').each(function () {
    $(this).after('<span style="display:none">1</span>');
  });

  $('table').tablesorter();
});

另外，由于您似乎正在进行字母数字排序，您可能想尝试一下我改进过的tablesorter分支。它将在“text 4”之后正确地对“text 22”进行排序。

- Mottie

---

在干净快速的jQuery中，以下代码将变为$("table").tablesorter().find("img").after('<span class="setstyleincss">111</span')。尽管使用tablesorter提供的事件可以使DOM更轻量级（例如，如果表对象被其他函数使用，则您可能不想每次都处理这些额外的span）。 - mikakun

@mikakun 使用事件来添加/删除元素的唯一问题是如果表格很大，那么每个单元格都会进行DOM操作，使排序变得更慢。老实说，我认为最好的解决方案是仅解析img单元格数据，但是你不能使用tablesorter的原始版本来做到这一点。在我的tablesorter分支中，您可以从解析器内部访问单元格内容-请参见格式化函数：format: function(s, table, cell, cellIndex)（演示） - Mottie

如果我们正在谈论的是网页上的一个表格，那么这并不是个问题；巨大表格的问题在于“为什么要将巨大表格附加到网页中？”JavaScript 的作用就是处理大量数据和用户交互，并且只将需要显示的内容附加到 DOM 中。 - mikakun

Answer 3

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

- mikakun