質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Q&A

解決済

検索条件を保持したままソートをかける(Python, Flask)

macaroni323
macaroni323

総合スコア31

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

1回答

0グッド

0クリップ

347閲覧

投稿2022/11/04 00:07

編集2022/11/04 11:53

前提

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の内容を上書きしないためにはどうしたら良いでしょうか。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

FiroProchainezo

2022/11/04 11:13

・Flaskの質問をする場合は、質問内容の現象が再現する最小限のコードを提示ください。 ・DBの質問をする場合は、CREATE文や、データを入力するInsert文を提示ください。(SQLAlchemyまたはFlask-SQLAlchemyの場合は、そちらのClassを提示ください。) ・FlaskでSQLAlchemyを使う場合、一般的にはFlask-SQLAlchemyを使用しますが、SQLAlchemyとFlask-SQLAlchemyは別物です。Flask-SQLAlchemyではなくSQLAlchemyを使用しているという認識でよろしいですか? ・SQLAlchemy(Flask-SQLAlchemy)の質問をする場合は、モデル(Class)を提示ください。(データを登録する文も提示ください) ・「posts = Post.query.filter(Post.number >5)の結果が出てindex.htmlを表示している状態から、 ドロップダウンのソートを選んだ場合に」「ソート機能を実装し、セレクトボックスから何かしらを選択することでonchange検索結果がソートするような実装を行いました。」のような質問の場合、HTMLを提示ください。 何を言いたいかというと、情報が足りなさすぎて回答できません。 回答者にはmacaroni323さんが考えていることは分かりません。 やりたいことが書いてあっても、現状どうなっていて、どのような問題があるのか不明です。 ソースコードは実行できる最小限のコードを提示ください。 それから、ソースコードが端折られているからか、質問の意味が分かりません。 >posts = Post.query.filter(Post.number >5)の結果が出てindex.htmlを表示している状態から、 ドロップダウンのソートを選んだ場合にその結果をorderbyしたいのですが、 > posts = Post.query.filter(Post.number >5)の結果はどこにどう保持したら良いのでしょうか。 Post.query.filterの結果は、postsに入っていますが、「どこにどう保存したら良いか」とはどういう意味でしょうか? postsに入っていますとしか言えないと思うのですが。 なお、一番下の部分だけへの回答は不要です。 実行可能な最小限のコードを提供いただけないと、会話が噛み合わないなどの問題が発生し、解決に時間がかかるので、まず、実行可能な最小限のコードの提示を検討下さい。
macaroni323

2022/11/04 11:58 編集

詳細なご回答をいただきありがとうございました。情報が不足しておりすみませんでした htmlを追記させていただきました。 検索した場合も、ソートした場合もpostsをrender_templateの引数として渡しているのですが、 posts = Post.query.filter(Post.number > min_number_int)の結果が画面上で出ている時にソートをするとposts = Post.query.order_by('number').all()が走って、検索で指定した条件に結果関係なく、全てのレコードがソートされた状態で表示されてしまうのですが、ソート時に検索結果を引き継ぐためにはどうしたら良いのでしょうか。 セッションなどに保存する必要があるのでしょうか。
FiroProchainezo

2022/11/04 12:24

「実行可能な最小限のコードを提示ください」と書いているのは、現状を共有いただくためです。 macaroni323さんのコードを私は知りません。 つまり、どのようなページ構造になっていて、どのようなデータがあり、どのような画面があり、どのような構造物があり、それを何かすると、どのようになるのかは分かりようがありません。 修正いただいたようですが、現状もかなり断片的で、実行可能な最小限のコードにはなっていないようです。 部分的なコードだけで、流れを理解するのは困難です。 タグに「JavaScript」はありませんが、追加いただいたコードではJavaScriptが使われているようです。 モデルは追加いただいていないようですが、今後やり取りを続けていくと、このような追加情報が増えることが想像できます。 面倒だと思いませんか?最初に実行可能な最小限のコードがあれば、もっと先からはじめられると思いませんか? せっかく質問を編集いただいたので、一応回答します。 > セッションなどに保存する必要があるのでしょうか。 HTMLのページは全て独立したものなので、別ページに元ページの情報を保持させたい場合、その情報を都度渡す必要があります。 渡し方はいくつかありますが、最も簡単なのはGETのパラメータで渡してしまうことです。 現状のコードでも`'/?sort_by='+sort_by_paramater;`として渡しているところがあるので、こういう感じのパラメータでついでに渡して対応可能です。 2つめにポピュラーそうなのは、POSTでHiddenパラメータを渡す事です。 現状のコードでも、以下の様な形でデータを渡しているところがありますが、これをhiddenにして、自分が欲しいデータを埋め込み、次のページに渡す様構成すれば可能です。(今回はlocation.hrefで遷移しているので、対応不可かもしれませんが) ` <input type="text" placeholder="min_number" name="min_number" class="form-control mr-2" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">` 3つめは、Cookieにデータを書き込み利用することです。 4つめは、コメントにある通り、セッションを利用することです。 5つめは、現状の動作からAjaxを使った構造に作り直すことです。 ページを部分書き換えするので、検索条件はページに残ったままになり、その情報を都度送信することで対応可能になるはずです。 最後は、現状のMPA(現状の構成)から、SPA構成にし、ページを部分書き換えすることで、検索条件を保持しながら対応する方法です。(これは、実装方法により何を使うか変わるはずです。Ajax使うのとニュアンスは変わらないかも。) 昔勉強したときはGETで渡してしまうのが一番分かり易かった気がしますが、Flaskを使う場合はSessionを使った方が簡単だと思うので、Sessionを使ってみてはいかがでしょうか。
macaroni323

2022/11/04 12:31

詳細にありがとうございました。検討してみます。
FiroProchainezo

2022/11/07 01:11

わからない事があったら追加で質問をお願いします。 解決した場合は、自己回答等で質問の終了をお願いします。

回答1

0

自己解決

document.location.href = '/?sort_by='+sort_by_paramater;
ではなく

javascript

1 document.getElementById('dropdown_value').value = sort_by.value; 2 document.getElementById('search_form').submit();

として、search_formに

html

1<input type="hidden" name="dropdown_value" id="dropdown_value" value="" >

を追加しました

投稿2022/11/07 14:27

macaroni323

総合スコア31

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。