How do I sort a column that contains two divs with jQuery Tablesorter?

Question

I'm using jQuery Tablesorter to sort a table. One of my columns looks like this:

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

In other words, there's two divs, one to show Yes in green with a link, and the other to show No in red with a link. One of the divs is always hidden, and the two are toggled whenever the user clicks on the link.

jQuery Tablesorter cannot sort on this column. Is there a way to get it to do so, or do I have to modify the HTML to get it to work?

Answer 1

You could use the textExtraction callback:

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

I haven't tested that but it should work in theory

Answer 2

you'll want to look into creating a custom parser. its pretty simple, you just specify how to interpret the value in the cell by passing in a function to the format field.

Answer 3

A generic way to sort any type of column, no matter how the content is complex: add 'sorted' attribute to the , fill 'sorted' value in the server side according to the preffered order, (which is easier than in 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>

then add the following code in $(function ()

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