如何使用jQuery Tablesorter对包含两个div的列进行排序？ [英] How do I sort a column that contains two divs with jQuery Tablesorter?

问题描述

我使用 jQuery Tablesorter 对表格进行排序。我的一列是这样的：

 < td> 
< div> 
< span class =green>是< / span> < a href =##>（unverify）< / a> 
< / div> 
< div class =hidden> 
< span class =red>无<> / a> < a href =##>（验证）< / a> 
< / div> 
< / td> 
  

换句话说，有两个div，一个用绿色显示是一个链接，另一个用链接显示否为红色。其中一个div始终是隐藏的，并且只要用户点击链接就会切换两者。

jQuery Tablesorter无法在此列上排序。有没有办法让它这样做，或者我必须修改HTML才能使其正常工作？

解决方案

您可以使用 textExtraction callback：

  $（document）.ready（function（）{
 
 //调用tablesorter插件
 $（table）。tablesorter（{
 //定义一个自定义文本提取函数
 textExtraction：function（node）{
 // check your' （$（node）.find（'。green'）。length == 1）{
 //从标记中提取数据并返回它
 return $（节点）.find（'div：not（.hidden）'）。find（'span'）.text（）;; 
} 
 else {
 return $（node）.text （）; 
} 
} 
}）; 
}）; 
  

我还没有测试过，但理论上应该可行

I'm using jQuery Tablesorter to sort a table. One of my columns looks like this:

<td>
    <div>
        <span class="green">Yes</span> <a href="##">(unverify)</a>
    </div>
    <div class="hidden">
        <span class="red">No<>/a> <a href="##">(verify)</a>
    </div>
</td>

In other words, there's two divs, one to show Yes in green with a link, and the other to show No in red with a link. One of the divs is always hidden, and the two are toggled whenever the user clicks on the link.

jQuery Tablesorter cannot sort on this column. Is there a way to get it to do so, or do I have to modify the HTML to get it to work?

解决方案

You could use the textExtraction callback:

$(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();
          }
        } 
    }); 
}); 

I haven't tested that but it should work in theory

这篇关于如何使用jQuery Tablesorter对包含两个div的列进行排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！