Plugion JQuery Tablesorter - problemas na ordenação de valores monetarios

brunnoromero · Agosto 17, 2010, 5:54pm

Ola…
estou com problemas na ordenação de valores do tipo “1.512,20” de um tabela usando o plugin tablesorter do jquery,
ele só consegue ordenar corretamente quando o numero esta neste formato “1512,20” .
alguem que ja passou por isso conseguiu resolver!?

abrçs

leandro.costa · Agosto 17, 2010, 11:45pm

Olá, brunnoromero,

Gostaria de ver o html da tabela e a função tablesorter que você está chamando, pois, independente dos números “1.512,20”, “1512,20”, “$1512.20”, a ordenação funciona perfeitamente. Agora, não sei se pode estar ocorrendo este “bug” por causa do navegador que esteja usando, por sinal, qual é? Cuidado na hora de ordenar várias colunas ao chamar a função do tablesorter, pois pode confundir.

Abraço!

brunnoromero · Agosto 18, 2010, 9:19am

Utilizo essas bibliotecas,

<link type="text/css" href="javascript/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script src="javascript/jquery-latest.js" type="text/javascript"></script>
<script src="javascript/jquery.tablesorter.js" type="text/javascript"></script>
<link type="text/css" href="javascript/style.css" rel="stylesheet" />

função tablesorter:

<script>
$(document).ready(function() { 
    $("#dados").tablesorter({ 
       widgets: ['zebra']
   });   
}); 
</script>

Tabela utilizada:

<table cellspacing="0" cellpadding="0" border="0" align="center" class="tablesorter" id="dados">
	<thead>
		<tr>
			<th height="17" align="left" width="160" class="tableTitulo header">ESTABELECIMENTO*</th>
			<th height="17" align="left" width="180" class="tableTitulo header">DESCRICAO ITEM</th>
			<th height="17" align="center" width="60" class="tableTitulo header">TIPO RESGATE</th>
			<th height="17" align="center" width="80" class="tableTitulo header">QUANT.</th>
			<th height="17" align="center" width="25" class="tableTitulo header headerSortUp">PONTOS GAST.</th>
			<th height="17" align="center" width="80" class="tableTitulo header">CUSTO MEDIO(UN)</th>
			<th height="17" align="center" width="80" class="tableTitulo header">TOTA</th>
			
		</tr>
	</thead>
	<tbody>
		<tr bgcolor="#ffffff" class="even">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left" style="cursor: pointer;" class="tableLinha">PORTA CD</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">3</td>
			<td height="17" align="center" class="tableLinha">945,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
			<td height="17" align="center" onclick="teste();" class="tableLinha">0,00</td>
		</tr>
		<tr bgcolor="#ffffff" class="odd">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left" style="cursor: pointer;" class="tableLinha">CASQUINHA BOBS</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">535,21</td>
			<td height="17" align="center" class="tableLinha">2,50</td>
			<td height="17" align="center" onclick="teste();" class="tableLinha">20,00</td>
		</tr>
		<tr bgcolor="#f5f5f5" class="even">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left"   style="cursor: pointer;" class="tableLinha">SUNDAE BOBS PEQUENO</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">2</td>
			<td height="17" align="center" class="tableLinha">535,40</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
		</tr>
		<tr bgcolor="#ffffff" class="odd">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left" style="cursor: pointer;" class="tableLinha">1 L LUBRIFICANTE HX3 20W50</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">1</td>
			<td height="17" align="center" class="tableLinha">350,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
			<td height="17" align="center" onclick="teste();" class="tableLinha">0,00</td>
		</tr>
		<tr bgcolor="#f5f5f5" class="even">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left" style="cursor: pointer;" class="tableLinha">MILKSHAKE BOBS MEDIO</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">1</td>
			<td height="17" align="center" class="tableLinha">3.250,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
			<td height="17" align="center" onclick="teste();" class="tableLinha">0,00</td>
		</tr>
		<tr bgcolor="#ffffff" class="odd">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left" style="cursor: pointer;" class="tableLinha">XBURGER BOBS</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">2</td>
			<td height="17" align="center" class="tableLinha">250,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
			<td height="17" align="center" onclick="teste();" class="tableLinha">0,00</td>
		</tr>
		<tr bgcolor="#f5f5f5" class="even">
			<td height="17" align="left" class="tableLinha">POSTO ABOLICAO</td>
			<td height="17" align="left" style="cursor: pointer;" class="tableLinha">BOLA DE FUTEBOL</td>
			<td height="17" align="center" class="tableLinha">IMEDIATO</td>
			<td height="17" align="center" class="tableLinha">1</td>
			<td height="17" align="center" class="tableLinha">1.150,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
			<td height="17" align="center" class="tableLinha">0,00</td>
		</tr>
	</tbody>
</table>

valeu pela ajuda. abrçs

leandro.costa · Agosto 18, 2010, 10:16am

Opa, legal.

Realmente ocorre o problema, mas sabe porque? Deixe eu te explicar.

No tablesorter, existe alguns “parsers” pré definidos na biblioteca para poder fazer a ordenação correta, seja de uma URL, IP, porcento, uma data, valores em modea, etc.

Então, neste caso, você está com problemas em ordenar o campo moeda com o tipo de separador decimal diferente, por exemplo: 999.999.999,99
O tablesorter não conseguiu ordenar, pois, não reconheceu qual tipo de dado foi inserido na coluna, e não conseguiu efetuar o parser correto.

A solução é a seguinte:

É preciso criar um parser para tal tipo de ordenação, o tablesorter permite facilmente você customizar um parser, usando expressão regular.

Adicione este código em uma biblioteca sua, ou edite o código fonte do tablesorter e adicione lá.

$.tablesorter.addParser({ id: "moeda", is: function(s) { return true; }, format: function(s) { return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9,]/g),"")); }, type: "numeric" });
Para usar no campo desejado, configure a coluna com seu novo parser:

E o legal disso tudo, é que você fica a vontade em colocar valores como, 999.999,99 ou R$ 999.999,99. Vai funcionar perfeitamente.

Obs.: Coloquei o valor “modea” no 'id" do parser, porque já existe um chamado “currency”.

Se der tudo certo, avise por aqui.
Espero ter ajudado.
Abraço.

brunnoromero · Agosto 18, 2010, 12:22pm

Fala leandro…
ouw…funcionou perfeitoo :lol:

muito obrigado mesmo…
vlw d+
abraços

brunnoromero · Agosto 18, 2010, 2:10pm

leandro , mais uma perguntinha… hehe

o que quer dizer o “4” no na função

 $("#dados").tablesorter({4: {sorter:"moeda"}, widgets: ['zebra']});

vlws

leandro.costa · Agosto 18, 2010, 2:32pm

Que bom que funcionou!

O 4 é o índice da coluna da tabela, sempre a primeira coluna tem índice 0.

Entendeu?

Abraço!

brunnoromero · Agosto 18, 2010, 2:42pm

indica qual coluna! hehe

brunnoromero · Agosto 18, 2010, 2:42pm

valeuu d++

marcusmsousa · Agosto 24, 2010, 1:20am

Leandro

e para data qual o parser?

leandro.costa · Agosto 24, 2010, 1:50am

Olhando o código fonte, vi quais parsers já vem pré-definidos, são eles: “text”, “numeric”, “digit”, “currency”, “ipAddress”, “url”, “isoDate”, “percent”, “usLongDate”, “shortDate”, “time” e “metadata”. Isso na versão 2.0.3 do tablesorter, segue link do código fonte: http://tablesorter.com/jquery.tablesorter.js

Não cheguei a testar, mas talvez, “shortDate” atenda sua necessidade. Lembrando que, caso não tenha um “parser” que atenda sua necessidade de odernação, faça o seu!

Abraço!

cleber.adsl · Abril 11, 2011, 2:53pm

Estou com um problema bem parecido, porem com a data, não consigo fazer a ordenação corretamente pela data.

<table class="listaT">   
<thead>   
   <tr>   
      <th class="header">Tipo</th>   
      <th class="header">Data</th>    
      <th class="header">Entrada</th>
      <th class="header">Saída</th>    
      <th class="header">Quantidade</th>   
   </tr>   
</thead>   
<tbody>     
   <tr>
      <td>Nota</td>     
      <td>02/03/2011</td>     
      <td></td>     
      <td>52</td>     
      <td>1</td>    
   </tr>
   <tr>     
       <td>Nota</td>     
       <td>04/03/2011</td>     
       <td></td>     
       <td>53</td>     
       <td>1</td>    
   </tr>
   <tr>     
      <td>Pedido</td>     
      <td>04/03/2011</td>     
      <td></td>     
      <td>192</td>     
      <td>1</td>    
   </tr>
   <tr>     
      <td>Ajuste</td>     
      <td>11/02/2011</td>     
      <td></td>     
      <td>1</td>     
      <td>5</td>    
   </tr>
   <tr>     
      <td>Ajuste</td>     
      <td>11/02/2011</td>     
      <td></td>     
      <td>2</td>    
      <td>5</td>
   </tr>
   <tr>
      <td>Transferência</td>
      <td>11/04/2011</td>
      <td>2</td>
      <td>1</td>
      <td>3</td>
   </tr>
   <tr>     
      <td>Ajuste</td>
      <td>14/02/2011</td>
      <td>1</td>
      <td></td>
      <td>50</td>
   </tr>
</tbody>  
</table>
<script type="text/javascript">
$(document).ready(function(){
   $(".listaT").tablesorter({
      1 : {sorter : "shortDate"},
      dateFormat: "dd/mm/yyyy",
      sortList: [[1,0]],
      sortMultiSortKey: 'ctrlKey'
   });
});
</script>

Se alguem puder me dar uma ajuda eu agrdeço muito pois já fiz alterações nos parsers do Tablesorter porem não obtive o resultado esperado.

johnwayder · Junho 17, 2013, 5:32pm

Boa tarde, desculpa reviver o post (risos), porém não estou conseguindo ordenar minha tabela de forma numérica, ela ordena em ordem alfabética.

Por exemplo, quando clicado na coluna ?Valor? ele me retorna essa ordenação ?>

765.434
575.903
265.980
20.142.170
1.767.318

Muito obrigado!

system · Janeiro 5, 2016, 3:39pm

Plugion JQuery Tablesorter - problemas na ordenação de valores monetarios

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI