Question

我正在使用tablesorter JQUery插件通过单击列对HTML表的行进行排序。在大多数情况下，表格单元格包含简单的标记，如<td>hello</td>，因此默认行为正常。

但是，该表的一列包含这样的单元格

<td>
  <a id="1" class="festivalSubscribe " action="create" 
    controller="festivalSubscription" onclick="/* Lots of Javascript */">Not Subscribed 
  </a>

  <a id="1" class="festivalUnsubscribe hide" action="delete" 
    controller="festivalSubscription" onclick="/* Lots of JavaScript */">Subscribed 
  </a>
</td>

此列的每个单元格包含两个链接（如上所示），其中一个链接始终不可见（具有hide类的链接）。我想通过可见链接文本（“未订阅”或“订阅”）对此列进行排序。

该插件提供了定义a function的选项，其结果将用于确定如何对列进行排序，例如

textExtraction: function(node) { 
  // extract data from markup and return it  
  return node.childNodes[0].childNodes[0].innerHTML; 
}

但是，我找不到定义此函数的方法，以便正确排序简单案例<td>hello</td>和上述更复杂的案例。

Answer 1

试试这个，它应该处理具有子元素和没有子元素的两种情况：

textExtraction: function(node) { 
  // extract data from markup and return it  
  var $node_a = $(node).find("a");
  if ($node_a.length) {
    return $node_a.filter(":visible").text();
  }
  // normal case
  return node.innerHTML; 
}

Answer 2

我认为@Kevin B的答案最适合原始插件，但我想补充一点，我已经在github上分发了原始插件的副本，并添加了textExtraction选项的功能以允许指定列。所以这是可能的。

$("table").tablesorter({ 

  // Define a custom text extraction function for each column 
  // default extraction is obtained like this: `$(node).text()` 
  textExtraction: { 
    0: function(node) {
      return $(node).find("a:visible").text();
    }
  } 
});

Answer 3

试试这个：

textExtraction: function(node) { 
    return $('td :not(.hide)', node).text(); 
}

Answer 4

您可以抓住节点内找到的第一个可见元素，并使用以下方法从中提取文本：

$(node).find(':visible:eq(0)').text();

按列包含标记对表进行排序

4 个答案: