jquery - 如何使用 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，一个以绿色显示 Yes 并带有链接，另一个以红色显示 No 并带有链接。其中一个 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();
          }
        } 
    }); 
}); 

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