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总是被隐藏，只要用户点击链接，这两个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

您需要考虑创建custom parser。它非常简单，您只需通过将函数传递给格式字段来指定如何解释单元格中的值。

Answer 3

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

e.g。

<td sorter='1'> 
    <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>
<td sorter='2'> 
    <div  class="hidden"> > 
        <span class="green">Yes</span> <a href="##">(unverify)</a> 
    </div> 
    <div>
        <span class="red">No<>/a> <a href="##">(verify)</a> 
    </div> 
</td>

然后在$（function（）

中添加以下代码

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

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

3 个答案: