kuroの覚え書き

96の個人的覚え書き

DataTablesの表にチェックボックスをつけて選択した内容から次のアクションを起こす

まず、DataTablesで表をweb上に表示できていることが前提。

いろいろなプラグインがあるのだけれど、ほぼ標準的に使われているButtonsに加え、Selectプラグインも入れておく。

<script type="text/javascript" src="{{ url_for('static', filename='js/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/dataTables.buttons.min.js') }}"></script>

説明はコードを見ればわかるだろう。

<script type="text/javascript">
    $(document).ready(function() {
        var events = $('#events');
        var table = $('#result').DataTable({
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            scrollY: 600,
            scrollX: true,
            stateSave: true,
            stateDuration: 0,
            colReorder: true,
            columnDefs: [ {             #この辺がチェックボックスを表示させるコード
                    orderable: false,
                    className: 'select-checkbox',
                    targets:   0             
                } ],
                select: {
                    style:    'multi',           #複数行にチェックを入れる事ができる
                    selector: 'td:first-child',      #一列目にチェックボックスをつける
                    blurable: false,
                },
                order: [[ 1, 'asc' ]],
            buttons: [
                'selectAll',              #全行にまとめてチェック
                'selectNone',            #全行のチェックを外す
                {
                text: 'Go to selected data',      #チェックを入れた行から次のアクションを起こすボタンを作る
                action: function ( e, dt, type, indexes ) {
                    selData = table.rows({selected: true}, indexes).data().toArray();    #チェックを付けた行を集めてjavascriptの2次元配列を作る
                    const transpose = a => a[0].map((_, c) => a.map(r => r[c]));     #ある列の値だけを集めたいので行列入れ替えの関数を作る
                    selData2 = transpose(selData)[34]                 #この場合34列目(チェックボックス除く)の値を集める
                    window.open("/exp_diff/?id="+selData2, '_blanc')          #集めた文字列を引数にデータベースを再検索して表示させる
                    }
                },
                'copy',
                {
                text: 'Download TSV',
                extend: 'csvHtml5',
                fieldSeparator: '\t',
                extension: '.tsv'
                },
                {
                extend: 'colvis',                #カラムを選択するこの機能は廃止されたらしいのだが
                text: 'Column select'
                }
            ],
            dom: 'Biftlp'
          });
  } );
</script>

f:id:k-kuro:20200523175216p:plain