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

Question

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

<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>

换句话说,有两个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();
          }
        } 
    }); 
}); 

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