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

我正在使用jQuery Tablesorter来对表格排序。我的一个列如下：如何使用jQuery Tablesorter对包含两个div的列进行排序？

<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才能使其运行？

来源

2011-09-27 Daniel T.

您可以使用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(); 
      } 
     } 
    }); 
});

我没有测试过这一点，但它应该在理论工作

来源

2011-09-27 20:37:57 Clive

谢谢，这个工作。对我来说，在'textExtraction'代码是'$返回（节点）.find（” div：not（.hidden）'）。find（'span'）。text（）;' –

Oi，我刚刚意识到这适用于所有列的textExtraction函数。在表中我想让其他列使用默认排序器排序，因为这些列工作正常。 –

@DanielT。，我的答案中的自定义分析器方法几乎是相同的东西，但允许您指定哪些列应用它至。 –

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

来源

2011-09-27 20:37:30

一个通用的方法来排序任何类型的列，不管内容如何复杂：添加'排序'属性的，根据优先顺序（这比在javascript中更容易）在服务器端填充'排序'值。

例如

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

然后添加以下代码在$（函数（）

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

来源

2012-10-16 17:19:21 Aviko

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

回答

相关问题