Jquery Tablesorter, sorting by link url rather than link content

Question

I am using Tablesorter on a table which uses links in the first column (of 4). The problem is that in FF and Chrome it orders the first column when clicked by url not the content of the link. For example

<tr><td><a href="http://abc.com">zzz</a></td><td>11</td><td>22</td><td>33</td></tr>
<tr><td><a href="http://cba.com">aaa</a></td><td>11</td><td>22</td><td>33</td></tr>
<tr><td><a href="http://bbb.com">ccc</a></td><td>11</td><td>22</td><td>33</td></tr>

It will order

zzz
ccc
aaa

instead of alphabetical. Is this meant to be the case? Is there a fix anyone can suggest?

Thanks

Answer 1

I have got the same problem. Found solution in the Documentation. Need to add a parser for the links which removes <a> tags from the beginning of the text in a column while sorting.

Here is code which should solve your problem:

 <script type="text/javascript">
    // add parser through the tablesorter addParser method 
    $.tablesorter.addParser({
        // set a unique id 
        id: 'links',
        is: function(s)
        {
            // return false so this parser is not auto detected 
            return false;
        },
        format: function(s)
        {
            // format your data for normalization 
            return s.replace(new RegExp(/<.*?>/),"");
        },
        // set type, either numeric or text
        type: 'text'
    }); 


    // Apply "links" parser to the appropriate column
    $(document).ready(function()
    {
        $("#MyTable").tablesorter({
            headers: {
                0: {
                    sorter: 'links'
                }
            }
    });
</script>

Answer 2

I fixed it by inserting a span with style display:none before the link. In the span put the link text.

e.g.

<td><span style="display:none"><%= Html.Encode(item.Name) %></span>
                <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'>
                    <%= Html.Encode(item.Name) %></a>
            </td>