投稿2020/11/19 06:08
前提・実現したいこと
Flaskを使ったWebアプリを製作しています。
フォームで検索条件を入力し、SQLクエリーを生成してデータベースから該当レコードを抽出してテーブル形式で表示するものです。テーブル形式の表示にJQueryプラグインの Datatablesを使用しています。Datatablesのソート機能ではカラムのヘッダー部のクリックで昇/降順にソートしてくれます。しかし、selectタグを使用したドロップダウンリストにしたカラムではselectedの値でソートしてくれません。
図のn_wireのカラムがドロップダウンリストです。他のカラムではヘッダークリックでソートされますが、n_wireカラムではクリックしても何も起こりません。
どのようにしたらソートできるのでしょうか。
ソースコード
質問用にコードをアレンジしました。
まず、Flaskを使用したPythonプログラム(Flask_Form06.py)です。
Python
1from flask import Flask, render_template, request, jsonify 2 3app = Flask(__name__) 4 5@app.route('/') 6def sql_01(): 7 #return render_template('ShowList06.html', rlist=jsonify(rlist)) 8 return render_template('ShowList06.html') 9 10@app.route('/list_post', methods=['POST']) 11def send_json(): 12 rlist=[ 13 {'id_inspect': 2030, 'inspected_at': '2020-07-01 00:16:53', 'judge': 101, 'n_wire': 0, 'n_seg': 8}, 14 {'id_inspect': 9789, 'inspected_at': '2020-07-01 02:31:34', 'judge': 102, 'n_wire': 0, 'n_seg': 1}, 15 {'id_inspect': 12976, 'inspected_at': '2020-07-01 03:08:11', 'judge': 101, 'n_wire': 29, 'n_seg': 0}, 16 {'id_inspect': 40417, 'inspected_at': '2020-07-01 10:01:29', 'judge': 105, 'n_wire': 1, 'n_seg': 0}, 17 {'id_inspect': 41683, 'inspected_at': '2020-07-01 10:13:22', 'judge': 104, 'n_wire': 3, 'n_seg': 6} 18 ] 19 print(rlist) 20 return jsonify(ResultSet=rlist) 21 22## おまじない 23if __name__ == "__main__": 24 app.run(debug=True) 25
続いて、templatesフォルダに置くShowList06.htmlファイルです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!-- Bootstrap --> 5 <link rel="stylesheet" 6 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 7 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 8 crossorigin="anonymous"> 9 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 10 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 11 crossorigin="anonymous"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 13 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 14 crossorigin="anonymous"></script> 15 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 16 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 17 crossorigin="anonymous"></script> 18 19 <!-- DataTables --> 20 <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 21 <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> 22 23</head> 24<body> 25 <div class="container"> 26 <div class="row"> 27 <table id="myTable" class="table table-striped table-hover" style="width:100%" > 28 <thead> 29 <tr> 30 <th>id_inspect</th> 31 <th>inspected_at</th> 32 <th>judge</th> 33 <th>n_wire</th> 34 <th>n_seg</th> 35 </tr> 36 </thead> 37 </table> 38 </div> 39 </div> 40 <script> 41 //表示言語を日本語にする 42 $.extend($.fn.dataTable.defaults, { 43 language: { 44 url: "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json" 45 } 46 }); 47 48 var n_wire_op = [0,1,2,3,4,5,28,29,30]; //n_wireのドロップダウンリスト列挙 49 50 $(document).ready(function() { 51 var tbl = $('#myTable').DataTable({ 52 bInfo: true, 53 bSort: true, 54 processing: true, 55 ajax: { 56 dataType: 'json', 57 url: '/list_post', 58 method: 'post', 59 dataSrc : "ResultSet" 60 }, 61 columns: [ 62 { data: 'id_inspect', className: 'text-right' }, 63 { data: 'inspected_at' }, 64 { data: 'judge', className: 'text-right'}, 65 { data: 'n_wire', className: 'text-right', 66 render: function(data, type, row) { 67 var html = ""; 68 html += "<select class='form-control' id='ListA'>"; 69 for (var val of n_wire_op) { 70 if (data==val) { 71 str1=" selected>" 72 }else{ 73 str1=">" 74 } 75 html += "<option value=" + val + str1 + val + "</option>" 76 } 77 html += "</select>" 78 return html; 79 } 80 }, 81 82 { data: 'n_seg', className: 'text-right'} 83 ] 84 }); 85 }); 86 </script> 87</body>
以上、よろしくお願いします。
回答3件
0
自己解決
時間がかかりましたが、参考サイト
https://www.gyrocode.com/articles/jquery-datatables-how-to-search-and-order-by-input-or-select-elements/
を参考にして自己解決しました。
参考サイトではhtmlでセレクトボックスを定義していましたが、私の場合はサーバーからjsonで受け取ってレンダリングしているという違いのためか、色々、コードを変えて試しましたが、選択を変えてもソートができなかったり、選択しても元の値に戻ったりという感じで、正しく動作しませんでしたが、最終的に以下のコードで動きました。デバッグついでにテーブルの内容をクリップボードにコピーするボタンとCSVファイルに保存するボタンも付けています。しかし、何故か、セレクトボックスのカラム（n_wire）の値がすべて「012345282930」になってしまうという新たな問題が残っていますので、コードを使用する方はご注意下さい。
ShowList06.htmlのコード
htlm
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!-- Bootstrap --> 5 <link rel="stylesheet" 6 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 7 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 8 crossorigin="anonymous"> 9 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 10 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 11 crossorigin="anonymous"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 13 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 14 crossorigin="anonymous"></script> 15 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 16 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 17 crossorigin="anonymous"></script> 18 19 <!-- DataTables --> 20 <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 21 <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> 22 23 <script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script> 24 <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script> 25 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 26 <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script> 27 28</head> 29<body> 30 <div class="container"> 31 <div class="row"> 32 <table id="myTable" class="table table-striped table-hover" style="width:100%" > 33 <thead> 34 <tr> 35 <th>id_inspect</th> 36 <th>inspected_at</th> 37 <th>judge</th> 38 <th>n_wire</th> 39 <th>n_seg</th> 40 </tr> 41 </thead> 42 </table> 43 </div> 44 </div> 45 <script> 46 //表示言語を日本語にする 47 $.extend($.fn.dataTable.defaults, { 48 language: { 49 url: "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json" 50 } 51 }); 52 53 var n_wire_op = [0,1,2,3,4,5,28,29,30]; //n_wireのドロップダウンリスト列挙 54 55 $(document).ready(function() { 56 var tbl = $('#myTable').DataTable({ 57 lengthMenu: [ 5, 10, 15, 20, 25 ], // 件数切替の値を5刻みにする 58 displayLength: 5, // 件数のデフォルトの値を5にする 59 bInfo: true, // 「xx件中yyからzzまで表示」の表示 60 bSort: true, 61 dom: 'Bfrtip', 62 buttons: [ 63 //'copy', 'csv', 'excel', 'pdf', 'print' 64 'copy', 'csv' 65 ], 66 bInfo: true, 67 bSort: true, 68 processing: true, 69 ajax: { 70 dataType: 'json', 71 url: '/list_post', 72 method: 'post', 73 dataSrc : "ResultSet" 74 }, 75 76 columnDefs: [ 77 { targets: [3], 78 type: 'string', 79 render: function(data, type, full, meta){ 80 if (type === 'filter' || type === 'sort') { 81 var api = new $.fn.dataTable.Api(meta.settings); 82 var td = api.cell({row: meta.row, column: meta.col}).node(); 83 data = $('select', td).val(); 84 } 85 return data; 86 } 87 } 88 ], 89 90 columns: [ 91 { data: 'id_inspect', className: 'text-right' }, 92 { data: 'inspected_at' }, 93 { data: 'judge', className: 'text-right'}, 94 { data: 'n_wire', className: 'row-selected', 95 render: function(data, type, row, meta) { 96 var html = ""; 97 html += "<select class='form-control' id='ListA'>"; 98 for (var val of n_wire_op) { 99 if (data==val) { 100 str1=" selected>" 101 }else{ 102 str1=">" 103 } 104 html += "<option value=" + val + str1 + val + "</option>" 105 } 106 html += "</select>" 107 return html; 108 } 109 }, 110 111 { data: 'n_seg', className: 'text-right'} 112 ] 113 }); 114 115 $('#myTable').on('change', 'tbody select', function(){ 116 var sVal = $(this).val(); 117 var cell = tbl.cell( $(this).closest('td') ); 118 cell.data(sVal).draw(); 119 }); 120 121 }); 122 </script> 123</body>
その後、もっと良いやり方を解説しているサイトを見つけました。
http://oarisumi.hateblo.jp/entry/2013/09/19/191544
このサイトで参照している
https://datatables.net/release-datatables/examples/plug-ins/dom_sort.html
を見ると、セレクトボックス、テキスト入力、チェックボックスなどでソートする方法が書かれています。
因みに、その方法を使ってもクリップボードの値は固定値のままでしたが。
投稿2020/11/24 09:08
総合スコア31
0
時間がかかりましたが、参考サイト
https://www.gyrocode.com/articles/jquery-datatables-how-to-search-and-order-by-input-or-select-elements/
を参考にして自己解決しました。
参考サイトではhtmlでセレクトボックスを定義していましたが、私の場合はサーバーからjsonで受け取ってレンダリングしているという違いのためか、色々、コードを変えて試しましたが、選択を変えてもソートができなかったり、選択しても元の値に戻ったりという感じで、正しく動作しませんでしたが、最終的に以下のコードで動きました。デバッグついでにテーブルの内容をクリップボードにコピーするボタンとCSVファイルに保存するボタンも付けています。しかし、何故か、セレクトボックスのカラム（n_wire）の値がすべて「012345282930」になってしまうという新たな問題が残っていますので、コードを使用する方はご注意下さい。
ShowList06.htmlのコード
htlm
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!-- Bootstrap --> 5 <link rel="stylesheet" 6 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 7 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 8 crossorigin="anonymous"> 9 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 10 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 11 crossorigin="anonymous"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 13 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 14 crossorigin="anonymous"></script> 15 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 16 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 17 crossorigin="anonymous"></script> 18 19 <!-- DataTables --> 20 <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 21 <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> 22 23 <script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script> 24 <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script> 25 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 26 <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script> 27 28</head> 29<body> 30 <div class="container"> 31 <div class="row"> 32 <table id="myTable" class="table table-striped table-hover" style="width:100%" > 33 <thead> 34 <tr> 35 <th>id_inspect</th> 36 <th>inspected_at</th> 37 <th>judge</th> 38 <th>n_wire</th> 39 <th>n_seg</th> 40 </tr> 41 </thead> 42 </table> 43 </div> 44 </div> 45 <script> 46 //表示言語を日本語にする 47 $.extend($.fn.dataTable.defaults, { 48 language: { 49 url: "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json" 50 } 51 }); 52 53 var n_wire_op = [0,1,2,3,4,5,28,29,30]; //n_wireのドロップダウンリスト列挙 54 55 $(document).ready(function() { 56 var tbl = $('#myTable').DataTable({ 57 lengthMenu: [ 5, 10, 15, 20, 25 ], // 件数切替の値を5刻みにする 58 displayLength: 5, // 件数のデフォルトの値を5にする 59 bInfo: true, // 「xx件中yyからzzまで表示」の表示 60 bSort: true, 61 dom: 'Bfrtip', 62 buttons: [ 63 //'copy', 'csv', 'excel', 'pdf', 'print' 64 'copy', 'csv' 65 ], 66 bInfo: true, 67 bSort: true, 68 processing: true, 69 ajax: { 70 dataType: 'json', 71 url: '/list_post', 72 method: 'post', 73 dataSrc : "ResultSet" 74 }, 75 76 columnDefs: [ 77 { targets: [3], 78 type: 'string', 79 render: function(data, type, full, meta){ 80 if (type === 'filter' || type === 'sort') { 81 var api = new $.fn.dataTable.Api(meta.settings); 82 var td = api.cell({row: meta.row, column: meta.col}).node(); 83 data = $('select', td).val(); 84 } 85 return data; 86 } 87 } 88 ], 89 90 columns: [ 91 { data: 'id_inspect', className: 'text-right' }, 92 { data: 'inspected_at' }, 93 { data: 'judge', className: 'text-right'}, 94 { data: 'n_wire', className: 'row-selected', 95 render: function(data, type, row, meta) { 96 var html = ""; 97 html += "<select class='form-control' id='ListA'>"; 98 for (var val of n_wire_op) { 99 if (data==val) { 100 str1=" selected>" 101 }else{ 102 str1=">" 103 } 104 html += "<option value=" + val + str1 + val + "</option>" 105 } 106 html += "</select>" 107 return html; 108 } 109 }, 110 111 { data: 'n_seg', className: 'text-right'} 112 ] 113 }); 114 115 $('#myTable').on('change', 'tbody select', function(){ 116 var sVal = $(this).val(); 117 var cell = tbl.cell( $(this).closest('td') ); 118 cell.data(sVal).draw(); 119 }); 120 121 }); 122 </script> 123</body>
投稿2020/11/24 05:01
総合スコア31
0
以下に似たような質問があり、回答がついてました。
回答者がデモも作ってくれているので、参考にしてみてはいかがでしょうか。
投稿2020/11/20 02:39
総合スコア2424
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。