ひよっこ。

I want to…

jQueryでtablesorterを利用した場合にソートのカスタマイズを行う方法

Posted by hikaruworld : 2011 2月 8

jQuery1.4.4
tablesorter2.0

jQueryのプラグインの一つであるtablesorterを利用すると簡単にテーブルのソート処理を実装する事が出来ます。
基本的に空気を読んでソート処理をしてくれるんですが、
たまにカスタマイズしたくなるので、その方法を忘れないようにメモしておきます。

Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily

ドキュメントにあるように、とあるように、基本的には上記のようなフィールドのソートに対応しています。

以下サンプルコードから。addParserでパーサーを設定します

  $.tablesorter.addParser({ 
      // パーサのidを設定
      id: 'grades', 
      // false時に自動でのソートを行わない
      is: function(s) { 
          return false; 
      }, 
      // ソートの実装
      format: function(s) { 
          // 対象の値に対して表示順をindexで指定
          return s.replace(/good/,2).replace(/medium/,1).replace(/bad/,0); 
      }, 
      // set type, either numeric or text 
      type: 'numeric' 
  }); 

利用時はIDを指定して、該当の動作を制御します。

    $(function() { 
        $("table").tablesorter({ 
            headers: { 
                6: { 
                    sorter:'grades' 
                } 
            } 
        }); 
    });                  

以上です。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。