Solved : Problem with tablesorter & Jquery sorting prices with Euro sign

Question

Hello there, My question concerns the Jquery plugin Tablesorter :

I've a problem with the sorting of a columns with prices, formatted like that : 135.35 €, 149.99 €, 1500 €, etc

The sorting works well with the numbers only, but when i add the Euro symbol , the sorting is not working anyore.

I have this ASC order for the third columns (see code below) :

1) 1435 €

2) 190 €

3) 834 €

As you can see there's something wrong. Can someone please tell me what should i do here?

Thank you very much,

Francois

The JS :

<script type="text/javascript" id="js">
    $(document).ready(function() {
    $("table").tablesorter({
    });
});
</script>

The HTML : (3rd column needs to be sorted)

<table class="tablesorter" cellspacing="0" cellpadding="0" border="0">             
<thead> 
<tr>
<th width="50px">1</th> 
<th width="120px">2</th> 
<th width="280px" >3</th> 
</tr> 
</thead> 
<tbody> 

<tr>     
<td>bla bla bla</td> 
<td>bla bla bla</td> 
<td>834 €</td> 
</tr> 


<tr>     
<td>bla bla bla</td> 
<td>bla bla bla</td> 
<td>1435 €</td> 
</tr> 


<tr>     
<td>bla bla bla</td> 
<td>bla bla bla</td> 
<td>190 €</td> 
</tr> 

    </tbody> 
</table>

Answer 1

It seems the problem is that the numbers are interpreted as text, and not as numbers. (As text, 123 and 1234 are both before 2, since 1 is before 2.) This is probably because you have the € symbol in the expression that you're sorting.

Try stripping €, sorting and then adding € again. (Or, alternatively, add a separate column for the € which you don't allow sorting on, so that the data in the sorting column is purely numeric.)

Simple version:

<tr>
    <td>bla bla</td>
    <td>bla bla</td>
    <td>bla bla</td>
    <td>123</td>
    <td>&euro;</td>
</tr>

Note that I'm using € instead of €, just to be sure the browser will render it correctly.

Answer 2

The problem is that, with the euro sign, it's treating the data as a string rather than a number. So the ordering is done stringwise rather than numerically.

My solution would be to remove the euro sign from the data; then add a css class to those cells which have a numeric value which displays a euro symbol after.

td.currency:after
{
  content: " €";
}

Answer 3

The problem is that the price column is not recognized as numeric column and sorted as string values. You could force the sorter type to be numeric (see example in http://tablesorter.com/docs/example-meta-parsers.html)

Answer 4

The euro sign is not a number which makes the whole value a String. Strings are ordered as "111, 22, 3" and not as "3, 22, 111" as with Numbers.

Better put the euro sign in a separate "currency" column, e.g.

<td>1234</td>
<td>€</td>

You can if necessary add colspan="2" to the associated <th> table header.

Answer 5

Thanks a lot guys.

Mopoke, i like your idea and it's working like a charm .

Thank you very much