JQuery Tablesorter のカスタム パーサー

Question

私が使っているのは、 jQueryテーブルソーター パーサーがテーブル列に適用される順序に問題があります。$-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"
});

問題は、組み込みの通貨パーサーがカスタム パーサーよりも優先されることのようです。パーサーを tablesorter コード自体 (通貨パーサーの前) に組み込むこともでき、正しく動作しますが、これはあまり保守しやすいものではありません。次のようなものを使用してソーターを手動で指定することはできません。

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

テーブルの列はユーザ​​ー入力から動的に生成されるためです。1つのオプションは、CSSクラスとして使用するソーターを指定し、JQueryを使用して次のようなソーターを明示的に指定することだと思います この質問 が示唆していますが、可能であれば動的検出にこだわりたいと思います。

Answer 1

最初のオプションは、通貨値を持つ列に追加クラス「{'sorter':'currency'}」を与えることです。また、tablesorter がサポートするプラグイン メタデータが含まれていることを確認してください。これにより、要素ごとのオプションが取り込まれ、テーブルソーターにソート方法を明示的に指示します。

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

また、通貨をフォーマットする関数にもバグがあります。負の数は処理しません。

私はファイルを提出しました バグ, 、パッチのリリースに取り組んでいます。

2 番目のオプションは、この修正を tablesorter のコピーに適用することです。修正を適用すると、th または td で通貨ソーターを指定する必要がなくなります (td での指定はとにかくやりすぎです)。

jquery.tablesorter.js の 724 行目を編集します。

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

への変更：

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

場合：

• 値:$-3、$1、$3

• 現在の昇順:$1、$3、$-3

• 予想される昇順注文 $-3、$1、$3

場合：

• 値:-$3、$1、$3

• 現在の昇順:$1、$3、-$3

• 予想される昇順注文 $-3、$1、$3

Answer 2

私は同様の問題を持っていたとある textExtraction のオプションを発見しましたあなたの細胞は、マークアップを含む場合はお勧め。しかし、それはプリフォーマットフォーマッタとして完璧にうまく動作します！

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

Answer 3

私はこのようなものを使用し、それが私のために働いています。

とコラムの：

<番目のクラス= "{ '数字' 'ソーター'}">ヘッダにこのクラスを使用します。

その行われたら、数字の形ですべての通貨を取得するためのJavaScriptコードに変更を加えます。

その行わ

、

!!!並べ替えを楽しみます

ここでは、コードは次のとおりです。

HEADERます：

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

カラム（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;
        }
    }
  });