ASP.NET MVCのWebGrid + ReStable(うまくいかなかった)

ここ数日HTMLのtableをレスポンシブに対応する軽量なスクリプトのReStableをちらほらみるので触ってみました。NuGetでは配布されてないのでGitHubのページからDLします。

• ReStable

DLしたファイルから、以下の2ファイルをプロジェクトにコピーします。jsはScriptsフォルダに、cssはContentフォルダにコピーしました。

• jquery.restable.js
• jquery.restable.css

本当はReleaseビルドのときは.min.js, .min.cssが読み込まれるようにBundleConfig.csを構成するのがきれいなんですが、今回はおためしということでmin.jsとmin.cssは考えないでいってみます。

とりあえず、先日作ったASP.NET MVCでページャーつきテーブルを表示する に適用してみます。_Layout.cshtmlのheadタグにcssを、bodyの最後のほうにある@RenderSection("scripts", required: false)の前にjsを読み込ませるタグを追加します。

<!-- headタグの中 -->
<link href="~/Content/jquery.restable.css" rel="stylesheet" />

<!-- bodyタグの最後にある@RenderSection("scripts", required: false)の前 -->
<script src="~/Scripts/jquery.restable.js"></script>

あとは、Index.cshtmlでReStableを使うだけ。とりあえず書いてみた。

@section scripts {
<script type="text/javascript">
    $(function () {
        $("table").ReStable();
    });
</script>
}

結論からいうと、サイズが小さくなるとそれっぽく動くけど、テーブルのフッターにあるページャーのリンクが死んで使い物にならなかった。ちゃんと使おうと思ったら、もうちょい工夫しないといけなさそう。今日は時間切れなのでここまで。