Benutzerdefinierte Parser für JQuery Tablesorter

Question

Ich bin mit dem jQuery Tablesorter und haben ein Problem mit der Reihenfolge, in der Parser gegen Tabellenspalten angewendet werden . Ich füge einen benutzerdefinierten Parser Währung der Form -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 die eingebauten Währungs Parser Vorrang vor meinem benutzerdefinierten Parser nehmen. Ich konnte den Parser im tablesorter Code selbst (vor dem Währungs Parser) gesetzt und es funktioniert, aber das ist nicht sehr wartbar. Ich kann nicht die Sortierer manuell angeben etwas mit wie:

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

, da die Tabellenspalten dynamisch von Benutzereingaben erzeugt werden. Ich denke, eine Möglichkeit wäre, den Sortierer zu spezifizieren als CSS-Klasse zu verwenden und einige JQuery verwenden, um explizit einen Sortierer wie diese Frage schon sagt, aber ich würde es vorziehen, mit dynamischer Erkennung zu halten, wenn möglich.

Answer 1

Die erste Option ist die Spalten zu geben, haben die Währung zusätzliche Klassenwerte „{‚Sortierer‘:‚Währung‘}“. Stellen Sie außerdem sicher, dass Sie das Plugin-Metadaten sind darunter, die Stützen Tablesorter. Dies wird pro Element Optionen in den ziehen und ausdrücklich sagt tablesorter wie zu sortieren.

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

Außerdem gibt es einen Fehler in der Funktion Währung zu formatieren: es keine negativen Zahlen umgehen kann

.

Ich habe einen Bug eingereicht und arbeite einen Patch bei der Landung.

Die zweite Option ist dieses Update auf Ihre Kopie von tablesorter anzuwenden. Nachdem Sie das Update angewendet haben, werden Sie nicht die Währung Sortierer im th oder TDs (Angabe in die TDs ist über töten sowieso) angeben.

  

Leit. 724 von jquery.tablesorter.js:

     

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

     

Änderung an:

     

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

     

Fall:

     

  

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

  

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

  

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

  

     

Fall:

     

  

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

  

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

  

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

  

Answer 2

Ich hatte ein ähnliches Problem und entdecken die textExtraction Option, die ist empfohlen, wenn Ihre Zellen Markup enthalten. Aber es funktioniert sehr gut als Pre-Format Formatierer!

$('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 habe so etwas wie diese und es funktioniert für mich.

Verwenden Sie diese Klasse in Header und in der Spalte .

Wenn ihre getan, Änderungen im JavaScript-Code in Form von Ziffern alle die Währung zu bekommen.

Seine getan, genießen Sortierung !!!

Hier ist der Code:

Rubrik:

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

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