前提
Python + Flask＋SQLAlchemy+Sqliteでアプリを開発しています。
・投稿された内容一覧に対して、チェックボックスなどで条件を選択し、「検索」ボタンを押すことで検索結果にフィルターをかけるような実装を行いました。
・ソート機能を実装し、セレクトボックスから何かしらを選択することでonchange検索結果がソートするような実装を行いました。
実現したいこと
・検索ボタンで検索された内容に対してソートできるようにしたいのですが、検索した結果をどこにどのように保持して良いのかわかりません。
該当のソースコード
以下は「検索」ボタンを押した時の例です。(変数などは実際のものとは少し変えています。）
python
1@bp.route('/', methods=['POST'])
2def post():
3 min_number:str = request.form.get('min_number')
4 min_number_int = int(min_number)
5 posts = Post.query.filter(Post.number > min_number_int)
6 return render_template('index.html', posts=posts)
これはドロップダウンのソートをした時の実装です。
python
1@bp.route('/', methods=['GET'])
2def get():
3 sort_by = request.args.get("sort_by")
4 if sort_by== "number":
5 posts = Post.query.order_by('number').all()
6 return render_template('index.html', posts=posts)
ソートをする箇所のHTMLです。
html
1 <select name="sort_by" id="sort_by" class="form-select " aria-label="Default select example" style="width:150px;">
2 <option value="" >Default</option>
3 <option value="number">Sort by number</option>
4 </select>
5 </div>
6 <script type="text/javascript">
7 var sort_by = document.getElementById('sort_by');
8 sort_by.onchange = function() {
9 var sort_by_paramater = this.options[this.selectedIndex].value;
10 document.location.href = '/?sort_by='+sort_by_paramater;
11 };
12
13 window.onload=function(){
14 let params = (new URL(document.location)).searchParams;
15 let name = params.get('sort_by');
16 var sort_by_elems = document.getElementById('sort_by');
17 checkSelect(sort_by_elems,name);
18 }
19 function checkSelect(obj,val){
20 for(var i=0;i<obj.length;i++){
21 if(obj[i].value==val){
22 obj[i].selected=true;
23 break;
24 }
25 }
26 }
27 </script>
28
検索をしている箇所です
html
1 <form action="/" method="POST" enctype="multipart/form-data">
2 <input type="text" placeholder="min_number" name="min_number" class="form-control mr-2" aria-label="Sizing example input"
3 aria-describedby="inputGroup-sizing-sm">
4 <input type="submit" class="btn base-button d-block w-100" value="検索">
5 </div>
6 </form>
posts = Post.query.filter(Post.number > min_number_int)の結果が出てindex.htmlを表示している状態から、ドロップダウンのソートを選んだ場合に検索結果に対してorderbyしたいのですが、
posts = Post.query.filter(Post.number > min_number_int)の結果を保持したまま、再ドロップダウンからsort by number を選択した際に、posts = Post.query.order_by('number').all()で、postsの内容を上書きしないためにはどうしたら良いでしょうか。
Q&A
自己解決
