Web開発のエラー解決
現在アプリ開発はお休み、Webで色々開発中です！
そんな中、ハマったことがあったのでメモしておきます。
DataTables
jQueryのプラグインで、DataTablesというものがあります。
tableにソートや検索、ページング機能をつけてくれる使えるやつなんですが、
よくわからないバグがありました。
scrollYを指定すると、thがずれる
私はChromeを使っていますが、ここで言われてるものと同じ現象が起きました。
どういうバグ？
私は他のプラグインとの兼ね合いでページングをやめて、１ページに全て表示させることにしました。
しかしテーブルの行数が多いと、縦にながーく表示され不格好です。
こんな時、「scrollY」を指定するとそのサイズでインライン表示してくれます。
のですが、このオプションをつけたところ、th、つまりテーブルの上端部分が左に寄って表示されるというバグが発生しました。
上記リンクのイメージと同じです。
解決策
いくつか解決策はありますが、以下が一番簡単だと思います。
<script>
$(function(){
$("#hoge").DataTable({
"paging" : false,
"scrollY" : "500px",
"scrollCollapse" : true,
}).columns.adjust();
});
</script>
要は、DataTable()で生成したオブジェクトに対し、
columns.adjust()
でサイズを調整しているわけです。
これだけのことに２時間くらいもがきました。
どなたかの参考になれば幸いです。