sorting table rows by columns containing markup

Question

I'm using the tablesorter JQUery plugin to sort the rows of a HTML table by clicking on a column. In most cases, the table cells contain simple markup like <td>hello</td>, so the default behaviour works fine.

However, one column of the table contains cells like this

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

Each cell of this column contains two links (as above), one of which will always be invisible (the one with the hide class). I want to sort this column by the visible link text ("Not Subscribed" or "Subscribed").

The plugin provides am option to define a function, the results of which will be used to determine how to sort the column, e.g.

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

However, I can't find a way to define this function such that it will correctly sort the simple case <td>hello</td> and the more complex case described above.

maybe .innerText, so you only get actual text content and not tags? — Marc B
– Marc B, Commented Jan 11, 2012 at 15:28
what I want is the text of whichever link is not a member of the hide class, but I don't know how to express that in JQuery — Dónal
– Dónal, Commented Jan 11, 2012 at 15:38
You could use node.textContent for most modern browsers, however, for a few older browsers you have to use node.innerText. — user400654
– user400654, Commented Jan 11, 2012 at 15:45

user400654 · Accepted Answer · 2012-01-11 15:49:05Z

2

Try this, it should handle both cases of having child elements and not having child elements:

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

answered Jan 11, 2012 at 15:49

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mottie · Accepted Answer · 2012-01-11 16:10:55Z

2

I think @Kevin B's answer is best for the original plugin, but I wanted to add that I have forked a copy of the original plugin on github and added functionality to the textExtraction option to allow specifying columns. So this is possible.

$("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();
    }
  } 
});

answered Jan 11, 2012 at 16:10

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

1 Comment

Dónal Over a year ago

That's a nice improvement. I was surprised this feature was not available in the original.

Konrad Dzwinel · Accepted Answer · 2012-01-11 15:44:57Z

0

You can grab first visible element found inside the node and extract text from it using this:

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

answered Jan 11, 2012 at 15:44

Konrad Dzwinel

38.1k12 gold badges102 silver badges106 bronze badges

Comments

Krzysztof · Accepted Answer · 2012-01-11 15:48:39Z

0

Try this:

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

edited Jan 11, 2012 at 15:48

answered Jan 11, 2012 at 15:43

Krzysztof

16.2k2 gold badges52 silver badges79 bronze badges

Collectives™ on Stack Overflow

sorting table rows by columns containing markup

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related