ASP.NET MVC で jQuery の tablesorter プラグインを使う
ASP.NET MVC 3 のスキャフォールディングで自動作成した Index ビューにソート機能を追加するメモ。
別に特別なことは何も無いんですがはまったので。
事前準備
適当なモデルを作って、スキャフォールディングで View を自動生成して下さい。
で、とりあえずビルドしてテストデータを投入します。
tablesorter プラグインの取得
以下からプラグインを取得します。
zip を解凍して jquery.tablesorter.min.js を ASP.NET MVC プロジェクトの Script フォルダに突っ込んで下さい。
tablesorter プラグインの設定
とりあえず Index View にだけ適用しましょう。
Index.cshtml を開いて以下の記述を追加します。
<script src="<Path>/Scripts/jquery.tablesorter.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("table").tablesorter(); }); </script>
で、実はこれだけだと上手く動きません。ここではまりました。
tablesorter を動かすには thead タグがいるんですが、
スキャフォールディングで自動生成された View には thead タグが無いんですね。
という訳で、追加したら再度実行をば。
Name をクリックします。
ちょっとわかりにくいですがちゃんとソートされています。
ソート列が分かるようにする
さて。
次はどの列をソートしているのかが分かるようにしましょう。
先ほど落としてきた tablesorter プラグインの中に .gif ファイルが含まれているはずです。(themes\blue\asc.gif)
そこから asc.gif と desc.gif を ASP.NET MVC プロジェクトに追加しましょう。
そして Site.css に以下を追加して下さい。
table th { min-width: 50px; } table thead tr .headerSortUp { background-image: url(./asc.gif); background-position: center right; background-color: #ffcc66; background-repeat: no-repeat; } table thead tr .headerSortDown { background-image: url(./desc.gif); background-position: center right; background-color: #ffcc66; background-repeat: no-repeat; }
これでどの列がソートされているかわかりやすくなりました。
min-width を指定しているのは、ソートを示すアイコンが文字に被らないようにするためです。
多分他の方法はあるんでしょうがわかりません。誰か教えて下さい。