kuroの覚え書き

96の個人的覚え書き

DataTablesのカラム幅を可変にする

https://datatables.net/forums/discussion/42859/interest-in-colreorderwithresize-js
いろいろ探してみたところ、かつてはプラグインがあったところが、現在のバージョンではなくなっているらしいことがわかった。
さらに、そのプラグインを現行バージョンでも動くように改変している人も見つけたので、早速導入してみたのだが、なんか致命的な欠陥があって使えない。
というのも、現在すでに

$(document).ready(function() {
  var table = $('#result').DataTable({
//    paging: false,
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    scrollY: 600,
    scrollX: true,
    stateSave: true,
    stateDuration: 0,
    colReorder: true,
    buttons: [
			{
				extend: 'colvis',
				text: 'Column select'
			},
	   'copy', 'csv'
    ],
    dom: 'RBirtlpf'
  });
  table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
  // Event listener to the two range filtering inputs to redraw on input
  $('#max_1000g2015, #max_hgvd2017, #max_kav, #max_2kjpn, #max_sift, #min_p_hdvi, #max_v_c, #max_g_c').keyup( function() {
    table.draw();
  } );

} );

こんな感じに拡張して使っているのだけれど、この中で、scrollY、scrollXを使うためにすべてのカラムの幅を設定してしまっていて、このプラグインを追加しても、その設定値以下には縮められないのだ。今回可変にしたいのは最初の設定値よりも一時的に縮めて、他のカラムを見やすくしたいという要求があってのことなので、初期値より縮められないのは致命的だ。
scrollYを使わないとヘッダの固定ができなくなるので、カラム幅の初期値を設定は外せないので、どうにも両立できない。
まあ、そういう不具合があるからこそ、現行バージョンではこの機能がなくなってしまったんだと思う。

かといって、DataTablesじゃないJavascriptでテーブル整形するのも難しい。と言うのは多くの多機能スクリプトJavascriptの中、もしくはテーブルタグの中でテーブルの定義をかっちり指定しておく必要があり、Pythonで検索をかけた結果を動的に流し込むJinja2のレンダリングとの相性が悪いのだよ。

というわけで、現状のプログラムの中ではここはこれ以上拡張は難しいかなと。