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>     
<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>

回答1:

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)

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

回答3:

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\', "");
   }
});

回答4:

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.

回答5:

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.

回答6:

There is an updated version which supports localization.

来源：https://stackoverflow.com/questions/1977145/problem-with-tablesorter-jquery-sorting-prices-with-euro-sign

标签

jquery

sorting

tablesorter