jQuery
DataTables

DataTables のscrolly ずれる問題で躓いたのでその備忘録

ずれたヘッダーのthの対処

やりたかったこと

jsで動的に複数のtableを生成し、それぞれにscrollyを設定したdatatablesを適用する。

生成する複数のtableはdisplay:none;を付けているものとそうでないものがある。
複数のtableはページの状況に応じて全て再生成する場合がある。

問題1

→初回表示時はすべてのdatatablesが適切に表示されているがtableを全て再生成すると全てのtableのヘッダーのthがズレる。
ググるとcolumns.adjust()を使えばうまくいくとあったがadjustがfunctionじゃないとか言われた。

解決策1

正しくは
table.DataTable()columns.adjust();だった(tableはdatatablesを適用したtable)が
tableの生成タイミングによっては表示前にこれを使用してもずれが修正されなかった。
どうやらtableが生成された後でないとうまく機能しないようだったので処理タイミングをずらす等して対応した。

問題2

しかし次に、datatablesを適用した複数のtable全てに同時にcolumns.adjustが使えず、display:none;で非表示になっているtableについてはcolumns.adjustでずれを戻せないという問題にぶつかった。

解決策2

1ページ内でdatatablesを複数使う場合はid等を使用して一つ一つのtableに個別に指定をかけるしかなかった。
今回はすべてのtableに番号付きのidを付与してループで回して一つ一つcolumns.adjustを使った。
display:none;のtableは表示したタイミングでcolumns.adjustを使うしかない。