jQuery Tablesorter order by td id not td values

Question

I have the next simple table and I use jQuery tablesorter for order by columns:

<table class="tablesorter" id="tableinvoices">
    <thead>
        <tr>
            <th>Name</th>
            <th>LastName</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b id="n1">Sonia</b></td>
            <td><b id="l1">Soto</b></td>
            <td><b id="a1">20</b></td>
        </tr>
        <tr>
            <td><b id="n2">Carlos</b></td>
            <td><b id="l2">Rodriguez</b></td>
            <td><b id="a2">21</b></td>
        </tr>
        <tr>
            <td><b id="n3">Borja</td>
            <td><b id="l3">Valera</td>
            <td><b id="a3">21</td>
        </tr>
    </tbody>
</table>

If I click in Name, instead of order by values of td, order by id.

How do I order by the values​​?

Thanks for help and sorry for my bad english.

Answer 1

Here is a solution: http://jsfiddle.net/shtrih/Mh75v/

$(document).ready(function() { 
    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // define a custom text extraction function 
        textExtraction: function(node) { 
            // extract data from id and return it 

            console.log(node.childNodes[0].innerHTML); // Make sure the output values
            return node.childNodes[0].innerHTML; 
        } 
    }); 
}); 

I've used this example: http://tablesorter.com/docs/example-option-text-extraction.html

Answer 2

I'm assuming you're using this jQuery tablesorter.

var myTextExtraction = function(node)  
{   
    return node.id; 
} 
$(document).ready(function() 
    { 
        $("#tableinvoices").tableSorter( {textExtraction: myTextExtraction} ); 
    } 
); 

Answer 3

One way to do it - add a hidden column (style="display:none" on each of the tds should do the trick.). Put the ids that you want to sort by as contents of the hidden column, instead of adding them as the ids elsewhere. Set up tablesorter so that the hidden column is sortable but the Name column is not. Then add a jquery onclick listener to the top of the name column that will click the top of the hidden column. It's a bit of a kludge, but it should give you what you need.

Answer 4

Try this textExtraction function (demo):

$(function () {
    $("#tableinvoices").tablesorter({
        textExtraction: function (node) {
            return $(node).find('b').attr('id');
        }
    });
});

But, this textExtraction function assumes that EVERY table cell has an ID.