Custom Parser per JQuery Tablesorter

Question

Sto usando il jQuery Tablesorter e ho un problema con l'ordine in cui i parser sono applicati alle colonne della tabella. Sto aggiungendo un parser personalizzato per gestire la 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 sul mio parser personalizzato. Potrei mettere il parser nel codice del tablesorter stesso (prima del parser di valuta) e funziona correttamente, ma questo non è molto mantenibile. Non posso specificare il sorter manualmente utilizzando qualcosa come:

headers: { 
    3: { sorter: "fancyNumber" }, 
    11: { sorter: "fancyCurrency" } 
} 

poiché le colonne della tabella sono generati dinamicamente da input dell'utente. Immagino che un'opzione potrebbe essere quella di specificare il selezionatore da utilizzare come classe css e utilizzare qualche JQuery per specificare esplicitamente una sorter come this question suggerisce, ma preferirei mantenere il rilevamento dinamico se possibile.

Answer 1

La prima opzione consiste nel fornire alle colonne che hanno valori di valuta la classe aggiuntiva "{'sorter': 'currency'}". Assicurati inoltre di includere i metadati del plug-in, supportati da tablesorter. Questo inserirà le opzioni per elemento e dirà esplicitamente a 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 errore nella funzione di formattare la valuta: non gestisce i numeri negativi.

Ho archiviato un bug e sto lavorando all'atterraggio di una patch.

La seconda opzione è applicare questa correzione alla tua copia di tablesorter. Una volta applicata la correzione, non sarà necessario specificare il valutatore di valuta in th o td (specificando in td's è over-kill comunque).

Modifica la linea 724 di jquery.tablesorter.js:

ritorno $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ 0-9.]/G), "")) ;

modifica:

ritorno $ .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

• ordine crescente corrente: $ 1, $ 3, - $ 3

• ordine crescente atteso $ -3, $ 1, $ 3

Answer 2

Avevo un problema simile e ho scoperto l'opzione textExtraction che è consigliata quando le celle contengono markup. Tuttavia, funziona perfettamente come formattatore di pre-formato!

$('table').tablesorter({ 
    textExtraction: function(s) { 
    var text = $(s).text(); 
    if (text.charAt(0) === '$') { 
     return text.replace(/[^0-9-.]/g, ''); 
    } else { 
     return text; 
    } 
    } 
}); 

Answer 3

Ho usato qualcosa di simile e ha funzionato per me.

Utilizzare questa classe nell'intestazione < th class = "{'sorter': 'digit'}"> e nella colonna < td class = "{'sorter': 'digit'}">.

Una volta terminato, apportare modifiche nel codice javascript per ottenere tutta la valuta sotto forma di cifre.

È fatto, divertiti a ordinare !!!

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; 
     } 
    } 
    });