jQuery and Tablesorter

Question

Trying to get some custom sorting going on and haven't been able to get it.

This is close to what my table structure looks like..

<table>
  <thead>
    <tr>
      <th> data </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul>
          <li> 20 </li>
          <ul>
            <li> something </li>
          </ul>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

I want to sort on the number that sits in that first list element.

Have tried:

$("table").tablesorter({ 
    textExtraction: function(node) { 
    return node.childNodes[0].childNodes[0].innerHTML; 
}

Tablesorter sorts tables, not unordered lists. To sort a list, check out this answer: http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery/1134983#1134983 — Mottie, Jun 17 '11 at 20:37
My post got butchered by the system here.. the lists sit in the TDs of my table. — Shawn, Jun 17 '11 at 20:45
textExtraction: { 7: function(node) { return node.childNodes[0].childNodes[0].innerHTML; }. Like it mentions in the examples. — Shawn, Jun 17 '11 at 20:46
What exactly do you mean about the TDs? Please edit your question to show the real code. If you mean that the `ul` is inside a `td` tablesorter will not work for you - it expects each `td` to have *one* value. — Dan, Jun 17 '11 at 20:48
Dan, the custom textExtraction methods imply otherwise. It clearly shows dom traversal inside TD elements, bypassing markup and sorting on the value returned. — Shawn, Jun 17 '11 at 20:50

Mottie · Accepted Answer · 2011-06-18T01:39:15.567

3

Oh, now that I understand what you are trying to do... try this (demo):

$("table").tablesorter({
    textExtraction: function(node) {
        return parseInt( $.trim( $(node).find('li:first').text() ), 10);
    }
});

Update: Oops I see, it wasn't sorting numerically. Try this (demo):

$("table").tablesorter({
    textExtraction: {
        1: function(node) {
            return parseInt( $.trim( $(node).find('li:first').text() ), 10);
        }
    },
    headers: {
        1: { sorter:'digit' }
    }
});

edited Jun 18 '11 at 01:39

answered Jun 17 '11 at 22:12

Mottie

84,355
30
126
241

Fudgey, thanks. I've tried something similar to this. Why does adding a column break it? – Shawn Jun 17 '11 at 23:00
How is it broken? The demo you included above seems to work to me. – Mottie Jun 18 '11 at 01:12
Thanks fudgey -- tried several similar renditions prior to asking, but none seemed to work. Had to have been some hiccups in my JS syntax. – Shawn Jun 20 '11 at 15:21
I ended up making a blog post (http://wowmotty.blogspot.com/2011/06/jquery-tablesorter-missing-docs.html) about Tablesorter functions that seem to be missing in the docs... I had to dig a bit to figure out what some of them did. – Mottie Jun 20 '11 at 22:48

jQuery and Tablesorter

1 Answers1