Parser personalizzato per JQuery tablesorter
-
06-09-2019 - |
Domanda
Sto utilizzando il jQuery tablesorter e avere un problema con l'ordine in cui vengono applicati parser contro le colonne della tabella . Sto aggiungendo un parser personalizzato per gestire valuta del modulo $ -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"
});
Il problema sembra essere che il parser di valuta incorporato ha la precedenza sulla mia parser personalizzato. Ho potuto mettere il parser nel codice tablesorter stesso (prima che il parser valuta) e funziona correttamente, ma questo non è molto gestibile. Non posso specificare il sorter manualmente usando qualcosa come:
headers: {
3: { sorter: "fancyNumber" },
11: { sorter: "fancyCurrency" }
}
poiché le colonne della tabella sono generati dinamicamente da input dell'utente. Credo che una possibilità sarebbe quella di specificare il sorter da utilizzare come una classe CSS e utilizzare alcuni JQuery per specificare esplicitamente un selezionatore come questa domanda suggerisce, ma io preferirei restare con rilevazione dinamica, se possibile.
Soluzione
La prima opzione è quella di dare le colonne che hanno i valori di valuta della classe aggiuntiva "{ 'sorter': 'valuta'}". Inoltre assicurarsi che si sta compresi i metadati plug-in, che tablesorter supporti. Questo tirerà nelle opzioni per ogni elemento ed esplicitamente dire tablesorter come ordinare.
<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>
Inoltre, c'è un bug nella funzione di formato Valuta: non gestisce i numeri negativi
.Ho presentato una bug , e sto lavorando su una patch di atterraggio.
La seconda opzione è quella di applicare questa correzione per la vostra copia di tablesorter. Una volta applicato la correzione, non sarà necessario specificare il sorter valuta nella ° o TD (specificando nel TD è over-uccidere in ogni caso).
Modifica la linea 724 di jquery.tablesorter.js:
ritorno $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ 0-9.] / G), ""));
cambia in:
return $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ - 0-9.] / G), ""));
caso:
Valori: $ -3, $ 1, $ 3
attuale ordine crescente: $ 1, $ 3, $ - 3
ordine crescente atteso $ -3, $ 1, $ 3
caso:
valori: - $ 3, $ 1, $ 3
attuale ordine crescente: $ 1, $ 3, - $ 3
ordine crescente atteso $ -3, $ 1, $ 3
Altri suggerimenti
Ho avuto un problema simile e ho scoperto il href="http://tablesorter.com/docs/example-option-text-extraction.html" rel="nofollow"> textExtraction
opzione
$('table').tablesorter({
textExtraction: function(s) {
var text = $(s).text();
if (text.charAt(0) === '$') {
return text.replace(/[^0-9-.]/g, '');
} else {
return text;
}
}
});
Ho usato qualcosa come questo e ha funzionato per me.
Utilizzare questa classe nell'intestazione
Una volta che il suo fare, fare i cambiamenti nel codice javascript per ottenere tutta la moneta sotto forma di cifre.
il suo fare, godere di smistamento postale !!!
Ecco il codice:
INTESTAZIONE:
<th style='width: 98px;' class="{'sorter':'digit'}">
Amount
</th>
COLONNA (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;
}
}
});