DataTables

tableの見た目を色々カスタマイズするのに

https://www.datatables.net

これは結構使いやすい。
とは言っても、やはりバッティングする機能があってフルに機能してくれないのが辛いところ。

表示カラム選択
ソート機能
スクロール
ヘッダの固定
カラム幅の変更

このあたりを実現したいのだけど、表示カラム選択とスクロールとヘッダの固定の組み合わせがかなり相性が悪い。
DataTablesでもスクロールとヘッダ固定はincompatibleとなっている。

現状ではスクロール、ヘッダ固定の代わりにページング機能で見やすくできないか調整中。
カラム幅の変更はどうしたものか。

一方、filter機能はちゃんと使えて、各カラムを条件式で絞って表示できるようになった。
https://datatables.net/examples/plug-ins/range_filtering.html

これで、ざっくり検索した結果をちょっと細かく条件を絞り直して表示できる様になった。
表示だけの問題なので、検索し直すよりも断然速く、7カラムぶんの数値で絞っても一瞬で表示が可能であった。
scriptのコードは２のｎ乗で長くなるので、書き間違いがちょっと心配ではある。

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );

if~の部分で入力のある無しを各カラムで組み合わせているため、例えば７カラムだと128行になる。