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?

Clive · Accepted Answer · 2011-09-27 21:07:48Z

5

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

edited Sep 27, 2011 at 21:07

answered Sep 27, 2011 at 20:37

Clive

36.9k8 gold badges89 silver badges113 bronze badges

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

6 Comments

Daniel T. Over a year ago

Thanks, this worked. In my case, the code in textExtraction was return $(node).find('div:not(.hidden)').find('span').text();

Daniel T. Over a year ago

Oi, I just realized that this applies the textExtraction function to ALL the columns. Any way to apply it to only one column in a table? I want the other columns to sort using the default sorter, since those columns are working fine.

nathan gonzalez Over a year ago

@DanielT., the custom parser method in my answer is pretty much the same thing, but allows you to specify which columns to apply it to.

Clive Over a year ago

I've updated the code a little above to include your text selector and to return just the default text from the cell if jQuery doesn't find anything with a class of green in the node's content...could you try that?

Mottie Over a year ago

I've forked a copy of the tablesorter plugin and added the ability to apply the textExtraction to specific columns... just so you know ;)

|

nathan gonzalez · Accepted Answer · 2011-09-27 20:37:30Z

0

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.

answered Sep 27, 2011 at 20:37

nathan gonzalez

12k4 gold badges43 silver badges57 bronze badges

Comments

Aviko · Accepted Answer · 2012-10-16 17:19:21Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related