jquery datatables ヘッダがずれる事象の解消方法

jqueryのdatatablesを利用した際、ScrollYを指定するとヘッダがずれることがあります。

解決策

[columns.adjust()]を使う

datatableには、再度列の調整をしてくれる関数が提供されています。

var table = $('#datatable1').DataTable({
    scrollY: 360,
    ...
});

table.columns.adjust();

注意点

$(‘#datatable1’).datatable({});でも表はできますがcolumns.adjust()関数は動きません。
$(‘#datatable1’).Datatable({});なら動きます。

×：datatable
〇：Datatable

これに結構な時間ハマった。

タブなどの[display:none;]は切り替えで再度[columns.adjust()]を実施する

TableをCSS上で表示切替する場合は、CSSのdisplay: none;を切り替えることも多いと思います。
切り替え処理時に、columns.adjust()処理を追加することで、ずれなく表示できます。

レスポンシブなら[$(window).on(‘resize’…]で制御する

レスポンシブに設定するなら、Windowサイズを変更したときに発火させると良いです。

スマホの縦表示、横表示や
PCブラウザの起動時と、最大化時などに使えます。

var table = $('#datatable1').DataTable({
    scrollY: 360,
    ...
});

$(window).on('resize', function(){
    table.columns.adjust();
});