kuroの覚え書き

96の個人的覚え書き

DataTablesでカラム選択他

ここまでtableに表示させるカラムの選択はかなり独自のスクリプトで実現させていたのだが、いろいろ盛り込んでいるうちに機能的にバッティングする部分が多くなってきた。
そこでDataTablesの機能を調査してみたところ、DataTablesでもカラムの選択的表示が可能でありそうなことがわかった。
実は、ちょっとまえにその機能には気がついていたのだが、その時見た実装例では一旦全部が表示されてから、要らないカラムのチェックボックスをクリックして外すというもので、dataを更新する度にチェックをし直さなければならないように見えた。
しかし、この点は設定値を保存させる機能と合わせて使えば、プリセットで記憶しておけるということに気がついたので、試してみた。

参考にしたのはこのページ
http://a2d.webcraft.work/datatables_column/

DataTablesをダウンロードする際にExtention->Buttons->Column visibilityにチェックを入れておく。

cssはdatatables.cssでも、独自cssでも特に問題はなさそうだ。
javascript

<script>
$(function(){
  $("#result").DataTable({
    stateSave: true,
    buttons: [
    {
      extend: 'colvis',
      text: 'Column select'
    },
    'copy', 'csv'
   ],
   dom: 'B<"clear">lfrtip'
  }).columns.adjust().draw();
});
</script>

こんなふうな感じ。colvisというのでカラム選択し、stateSaveで設定を記憶できる。設定値はlocalstorageに保存されているので、ユーザーごとに設定値を保存できる。htmlはDataTablesの基本通りターゲットのtableにidを付与しておくだけだ。

さて、これによりカラム選択がDatatablesに統合されたので、 ページング機能との両立も可能になるはず。

    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],

この行を先程のscriptに加えたところ、カラムを途中で切り替えても、ページ切り替えで追従するようになった。これで見た目の不便さはかなり解消した。ついでに検索結果をcsv形式でコピーもしくはダウンロードできる機能もついた。

しかし、もう一点の懸案であるスクロールによるヘッダ行の固定はやはりうまくいかない。これはどうやら、カラム幅を全部指定してやらないとどうにもならないようだ。

というわけで、折り返しや、overflow:scrollなどの調整が必要な部分はcssに書いて、単純に幅を固定するカラムはそれぞれのth, tdタグ内に width: 4emなどと言った感じで幅指定divを入れてやる。この時、thとtdセットで幅を合わせておくことが必須。

  <table id="result" class="table display compact table-header-fixed" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th><div style="width : 4em">ID</div></th>
.........

と、うまくいったように思えたんだが、一晩たって動かしてみたらDataTablesのbuttons機能が何かとコンフリクトしているらしく、domにBを入れた途端にDataTables全体が機能停止するだけでなく、他のjavascriptにも影響しているっぽい。何がどうなっているんだ?

ウンウンとあれこれ弄くり回していると、あるとき、jsもcssもstaticフォルダから外しているのに、スクロール等のDataTables由来の機能が表示されたままであることに気がついた。これはもしや・・・
なんと、ブラウザのキャッシュをクリアするとちゃんと表示されるようになった。プログラム自体は正常だったようだ。キャッシュに異常な状態でなぜ保存されてしまったのかはわからない。