сортировка строк таблицы по столбцам, содержащим разметку

Question

Плагин 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). Я хочу отсортировать этот столбец по видимому тексту ссылки («Не подписан» или «Подписан»).

Плагин предоставляет возможность am определить функцию , результаты которой будут использоваться для определения порядка сортировки столбца, например

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

Однако я не могу найти способ определить эту функцию так, чтобы она правильно сортировала простой случай <td>hello</td> и более сложный случай, описанный выше.

Answer 1

Я думаю, что ответ @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 2

Попробуйте, это должно обрабатывать оба случая с дочерними элементами и без дочерних элементов:

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 3

Вы можете получить первый видимый элемент, найденный внутри узла, и извлечь из него текст, используя это:

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

Answer 4

Попробуйте это:

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