Benutzerdefinierte Parser für JQuery Tablesorter

Question

Ich verwende die jQuery Tablesorter und ein Problem mit der Reihenfolge, in der Parser gegen Tabellenspalten angewendet werden. Ich füge einen kundenspezifischen Parser hinzu, um Währung des Formulars $ -3.33 zu behandeln.

$.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" 
}); 

Das Problem scheint zu sein, dass der integrierte Währungsparser Vorrang vor meinem benutzerdefinierten Parser hat. Ich könnte den Parser in den eigentlichen Tabellensortierer-Code setzen (vor dem Währungsparser) und es funktioniert ordnungsgemäß, aber das ist nicht sehr wartbar. Ich kann den Sortierer nicht manuell mit etwas wie dem folgenden angeben:

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

da die Tabellenspalten dynamisch aus Benutzereingaben generiert werden. Ich denke, eine Option wäre, den Sortierer als CSS-Klasse zu spezifizieren und einige JQuery zu verwenden, um explizit einen Sortierer wie this question suggeriert, aber ich würde lieber mit dynamischen Erkennung wenn möglich bleiben.

Answer 1

Die erste Option besteht darin, den Spalten mit Währungswerten die zusätzliche Klasse "{'sorter': 'currency'}" zu geben. Stellen Sie außerdem sicher, dass Sie die Plug-in-Metadaten einschließen, die von der Tabelle unterstützt werden. Dadurch werden die Optionen pro Element abgerufen und sorter sortierte Sortiermethoden explizit mitgeteilt.

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

Auch gibt es einen Fehler in der Funktion zum Formatieren von Währung: Es behandelt keine negativen Zahlen.

Ich habe eine bug eingereicht, und arbeite an der Landung eines Patches.

Die zweite Option besteht darin, dieses Update auf Ihre Kopie von Tablesorter anzuwenden. Sobald Sie den Fix angewendet haben, müssen Sie den Währungssortierer in den th oder tds nicht mehr angeben (die Angabe in den tds ist ohnehin über-kill).

Leit. 724 von jquery.tablesorter.js:

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

Änderung:

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

Fall:

• Werte: $ -3, $ 1, $ 3

• aktuelle asc Auftrag: 1, $ $ 3, $ - 3

• erwartet asc um -3 $, $ 1, $ 3

Fall:

• Werte: - $ 3, $ 1, $ 3

• aktuelle asc Auftrag: 1, $ 3 $ - $ 3

• erwartet asc um $ -3, $ 1, $ 3

Answer 2

Ich hatte ein ähnliches Problem und entdeckte die textExtraction Option, die empfohlen wird, wenn Ihre Zellen Markup enthalten. Es eignet sich jedoch hervorragend als Formatierer im Format vor dem Formatieren!

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

Answer 3

Ich benutzte so etwas und es funktionierte für mich.

Verwenden Sie diese Klasse im Header < th class = "{'sorter': 'digit'}"> und in der Spalte < td class = "{'sorter': 'digit'}">.

Sobald es fertig ist, machen Sie Änderungen in JavaScript-Code für die gesamte Währung in Form von Ziffern.

Es ist fertig, viel Spaß beim Sortieren! Hier

ist der Code:

HEADER:

<th style='width: 98px;' class="{'sorter':'digit'}"> 
      Amount 
    </th> 

SÄULE (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; 
     } 
    } 
    });