ここ数日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タグの中 --><linkhref="~/Content/jquery.restable.css"rel="stylesheet" /><!-- bodyタグの最後にある@RenderSection("scripts", required: false)の前 --><scriptsrc="~/Scripts/jquery.restable.js"></script>
あとは、Index.cshtmlでReStableを使うだけ。とりあえず書いてみた。
@section scripts {
<scripttype="text/javascript"> $(function(){ $("table").ReStable();});</script>
}
結論からいうと、サイズが小さくなるとそれっぽく動くけど、テーブルのフッターにあるページャーのリンクが死んで使い物にならなかった。ちゃんと使おうと思ったら、もうちょい工夫しないといけなさそう。今日は時間切れなのでここまで。