ASP.NET MVC で jQuery の tablesorter プラグインを使う

ASP.NET MVC 3 のスキャフォールディングで自動作成した Index ビューにソート機能を追加するメモ。

別に特別なことは何も無いんですがはまったので。

事前準備

適当なモデルを作って、スキャフォールディングで View を自動生成して下さい。

で、とりあえずビルドしてテストデータを投入します。

tablesorter プラグインの取得

以下からプラグインを取得します。

http://tablesorter.com/docs/

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 を指定しているのは、ソートを示すアイコンが文字に被らないようにするためです。
多分他の方法はあるんでしょうがわかりません。誰か教えて下さい。