読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

ASP.NET JavaScript

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

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>
}

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