如何使用jQuery Tablesorter对包含两个div的列进行排序？

我正在使用jQuery Tablesorter对表进行排序。 我的一个列看起来像这样：

 
 Yes (unverify) 
 
 No/a> (verify) 
  

换句话说，有两个div，一个用绿色显示带有链接的是，另一个用红色显示带有链接的否 。 其中一个div总是被隐藏，只要用户点击链接，这两个就会被切换。

jQuery Tablesorter无法对此列进行排序。 有没有办法让它这样做，或者我是否必须修改HTML才能使它工作？

Answer 1

您可以使用textExtraction回调：

 $(document).ready(function() { // call the tablesorter plugin $("table").tablesorter({ // define a custom text extraction function textExtraction: function(node) { // check you're at the right column if ($(node).find('.green').length == 1) { // extract data from markup and return it return $(node).find('div:not(.hidden)').find('span').text();; } else { return $(node).text(); } } }); }); 

我没有测试过，但它应该在理论上起作用

Answer 2

你会想要创建一个自定义解析器 。 它非常简单，您只需通过将函数传递给格式字段来指定如何解释单元格中的值。

Answer 3

无论内容如何复杂，对任何类型的列进行排序的通用方法：根据优先顺序将“sorted”属性添加到服务器端的“sorted”排序值（这比javascript更容易）。

例如

  
 Yes (unverify) 
 
 No<>/a> (verify) 
   
 > Yes (unverify) 
 
 No<>/a> (verify) 
  

然后在$（function（）中添加以下代码

 $("table.tablesorter").tablesorter({ textExtraction: function(node){ return $(node).attr("sorter"); } });