Analisador personalizado para JQuery Tablesorter
-
06-09-2019 - |
Pergunta
Eu estou usando o jQuery Tablesorter e têm um problema com a ordem em que os analisadores são aplicadas contra colunas da tabela . Eu estou adicionando um analisador personalizado para a moeda alça do formulário $ -3,33.
$.tablesorter.addParser({
id: "fancyCurrency",
is: function(s) {
return /^\$[\-]?[0-9,\.]*$/.test(s);
},
format: function(s) {
s = s.replace(/[$,]/g,'');
return $.tablesorter.formatFloat( s );
},
type: "numeric"
});
O problema parece ser que o built-in analisador moeda tem precedência sobre o meu analisador personalizado. Eu poderia colocar o analisador no próprio código tablesorter (antes o analisador moeda) e ele funciona corretamente, mas isso não é muito sustentável. Eu não posso especificar o classificador manualmente usando algo como:
headers: {
3: { sorter: "fancyNumber" },
11: { sorter: "fancyCurrency" }
}
desde as colunas da tabela são gerados dinamicamente a partir de entradas do usuário. Eu acho que uma opção seria a de especificar o classificador para uso como uma classe css e usar alguns JQuery para especificar explicitamente um classificador como esta questão sugere, mas eu prefiro ficar com detecção dinâmica, se possível.
Solução
A primeira opção é dar as colunas que têm valores de moeda da classe adicional "{ 'classificador': 'moeda'}". Também certifique-se que você está incluindo os metadados plugin, que suporta Tablesorter. Isso vai puxar nos por elemento opções e dizer explicitamente tablesorter como classificar.
<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" />
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.ui.core.js"></script>
<script src="/js/jquery.metadata.js"></script>
<script src="/js/jquery.tablesorter.js"></script>
<script>
$(document).ready(function()
{
$("#table").tablesorter();
}
);
</script>
</head>
<table id="table" class="tablesorter">
<thead>
<tr>
<th class="{'sorter':'currency'}">Currency</th>
<th>Integer</th>
<th>String</th>
</tr>
</thead>
<tbody>
<tr>
<td class="{'sorter':'currency'}">$3</td>
<td>3</td>
<td>three</td>
</tr>
<tr>
<td class="{'sorter':'currency'}">-$3</td>
<td>-3</td>
<td>negative three</td>
</tr>
<tr>
<td class="{'sorter':'currency'}">$1</td>
<td>1</td>
<td>one</td>
</tr>
</tbody>
</table>
Além disso, há um bug na função para a moeda formato:. Não lidar com números negativos
Eu já entrou com uma bug , e estou trabalhando na aterragem de um patch.
A segunda opção é para aplicar essa correção para a sua cópia do tablesorter. Depois de aplicar a correção, você não precisará especificar o classificador de moeda no th ou td do (especificando no td de é o excesso de matar de qualquer jeito).
Editar linha 724 de jquery.tablesorter.js:
retornar $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ 0-9.] / G), ""));
mudar para:
retornar $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ - 0-9.] / G), ""));
caso:
valores: $ -3, $ 1, $ 3
atual ordem asc: $ 1, $ 3, US $ - 3
ordem asc esperado $ -3, $ 1, $ 3
caso:
valores: - US $ 3, $ 1, $ 3
ordem asc atual: $ 1, $ 3, - $ 3
ordem asc esperado $ -3, $ 1, $ 3
Outras dicas
Eu tive um problema semelhante e descobriu o href="http://tablesorter.com/docs/example-option-text-extraction.html" rel="nofollow"> opção textExtraction que é recomendada quando as células contêm marcação. No entanto, ele funciona perfeitamente bem como um formatador de pré-formato!
$('table').tablesorter({
textExtraction: function(s) {
var text = $(s).text();
if (text.charAt(0) === '$') {
return text.replace(/[^0-9-.]/g, '');
} else {
return text;
}
}
});
Eu usei algo assim e funcionou para mim.
Use esta classe no cabeçalho
Uma vez que o seu feito, fazer alterações no código javascript para obter todo o dinheiro na forma de dígitos.
Seu feito, desfrutar de triagem !!!
Aqui está o código:
Cabeçalho:
<th style='width: 98px;' class="{'sorter':'digit'}">
Amount
</th>
COLUNA (td):
<td align="left" style='width: 98px;' class="{'sorter':'digit'}">
<%= Convert.ToDouble( a.AMOUNT ?? 0.0).ToString("C3") %>
</td>
javascript:
<script language="javascript" type="text/javascript">
jQuery("#rewardtable").tablesorter({
textExtraction: function (data) {
var text = $(data).text();
if (text.toString().indexOf("-$") != -1) {
return ("-" + text.replace(new RegExp(/[^0-9.]/g), ""));
}
else if (text.toString().indexOf("$") != -1) {
return (text.replace(new RegExp(/[^-0-9.]/g), ""));
}
else {
return text;
}
}
});