1

最新の Jquery テーブル ソーター プラグインを使用しようとしています。 http://mottie.github.com/tablesorter/docs/#Demo

問題は、日付形式のテーブル列があり、メールの値も含まれていることです。日付値を抽出し、日付値に基づいて並べ替えようとしています。

テーブルソーターの最新バージョンを使用しているため、 latest(http://mottie.github.com/tablesorter/docs/example-parsers-class-name.html) で利用可能なパーサークラス名を使用しようとしました。

以下の私のフィドルを見つけてください。

http://jsfiddle.net/meetravi/pztqe/8/

コードスニペット：

      <tr>
        <th>Name</th>
        <th>Major</th>
        <th>Sex</th>
        <th>English</th>
        <th>Japanese</th>
        <th>Calculus</th>
        <th>Geometry</th>
        <th class="sorter-shortDate">Date</th>
      </tr>
      <tbody>
      <tr>
        <td>Student01</td>
        <td>Languages</td>
        <td>male</td>
        <td>80</td>
        <td>70</td>
        <td>75</td>
        <td>80</td>
        <td><em>11/01/12 11:42</em><spanclass="label">xyz@xyz.com</span></td>
    </tr>
    </tbody>

<script type="text/javascript">
   $(document).ready(function(){
     $('#table-Id').tablesorter({
            theme: 'blue',
            dateFormat : "ddmmyy",
            textExtraction: {
                7: function(node, table, cellIndex) {
                    return $(node).find("em").text();
                }
            }
        });


});


</script>
4

1 に答える 1

1

まず、スパンとクラスの間にスペースが必要です。

次に、日付パーサーは 4 桁の年のみで動作するように設定されていddmmyyyyます。2 桁の年で動作するパーサーを入手するには、この問題を参照してください。

<td><em>11/01/2012 11:42</em><span class="label">xyz@xyz.com</span></td>

第 3 に、日付列の内容により、ヘッダーでソーター オプションを設定する必要があります。

headers: {
    7: { sorter: 'shortDate' }
}

最後にtextExtraction、デモには 2 つのオプションがありました。上に投稿したものではなく、2番目のものは関数をオーバーライドしていました。あなたが書いたものは完全に機能します:)

上記の変更のデモを次に示します。

更新:これは、次のパーサー コードを使用した更新されたデモです。

$.tablesorter.addParser({
    id: "ddmmyy",
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        s = s
            // replace separators
            .replace(/\s+/g," ").replace(/[\-|\.|\,]/g, "/")
            // reformat dd/mm/yy to mm/dd/yy
            .replace(/(\d{1,2})[\/\s](\d{1,2})[\/\s](\d{2})/, "$2/$1/$3");
        var d = new Date(s), y = d.getFullYear();
        // if date > 50 years old, add 100 years
        // this will work when people start using "70" and mean "2070"
        if (new Date().getFullYear() - y > 50) {
            d.setFullYear( y + 100 );
        }
        return d.getTime();
    },
    type: "numeric"
});
于 2012-10-11T15:18:57.130 に答える