Problem with tablesorter & Jquery sorting prices with Euro sign

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>     
<开发者_如何学Pythontd>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>

---

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)

---

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: " €";
}

---

Better option is to use a custom handler in tablesorter to remove out the Euro symbol before sorting. This method handles both the HTML code and non html code from what I can see.

It is done on the ready function at the bottom of the page

$("#tableSorterTable").tablesorter({
   // Define a custom function to ignore the euro
   textExtraction: function(node) {
      return node.innerHTML.replace(\'\u20AC\', "");
   }
});

---

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.

---

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.

---

There is an updated version which supports localization.