まず、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>