スポンサーリンク

jQueryのplugin、DataTables.jsでscrollY指定するとthがバグるエラー解決

Web開発のエラー解決

現在アプリ開発はお休み、Webで色々開発中です!

そんな中、ハマったことがあったのでメモしておきます。

PC

DataTables

jQueryのプラグインで、DataTablesというものがあります。

tableにソートや検索、ページング機能をつけてくれる使えるやつなんですが、

よくわからないバグがありました。

scrollYを指定すると、thがずれる

http://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width

私はChromeを使っていますが、ここで言われてるものと同じ現象が起きました。

どういうバグ?

私は他のプラグインとの兼ね合いでページングをやめて、1ページに全て表示させることにしました。

しかしテーブルの行数が多いと、縦にながーく表示され不格好です。

こんな時、「scrollY」を指定するとそのサイズでインライン表示してくれます。

のですが、このオプションをつけたところ、th、つまりテーブルの上端部分が左に寄って表示されるというバグが発生しました。

上記リンクのイメージと同じです。

解決策

いくつか解決策はありますが、以下が一番簡単だと思います。

<script>
$(function(){
  $("#hoge").DataTable({
    "paging" : false,
    "scrollY" : "500px",
    "scrollCollapse" : true,
  }).columns.adjust();
});
</script>

要は、DataTable()で生成したオブジェクトに対し、

columns.adjust()

でサイズを調整しているわけです。

これだけのことに2時間くらいもがきました。

どなたかの参考になれば幸いです。

ブログランキング、にほんブログ村
ブログランキング・にほんブログ村へ
スポンサーリンク

フォローする

スポンサーリンク