0
私はたくさんの写真と撮影された国のデータベースを持っています。これは私が作っている写真集です。現在、私はすべての写真を1ページに収めています。私はこれが好き。私は今、特定の国や都市のすべての写真を検索できるようにしたいと考えています。私のデザインでは、上部に2つのボタン（国別フィルタリング、都市別フィルタリング）があり、フィルタが使用されていない場合はデータベースのすべての画像が下に表示されます。これらのボタンをそれぞれの国と都市のドロップダウンリストにしたいと思います。ユーザーが国のボタンをクリックすると、ブートストラップを使ってドロップダウンが呼び出されます。彼らは選択した国をクリックしてそこにあるすべての写真を都市別に見ることができます。都市のドロップダウンをクリックすると、その都市のすべての写真が呼び出されます。国を選択すると、都市のドロップダウンにはその国の都市のみが表示されます。今、私はどのようにこれを行う手掛かりがありません。私はドロップダウンを設定することができます - しかし、私はすべての写真の国を得る - リピートを意味します。これどうやってするの？Django 1.10ドロップダウンメニューを使用してクエリをフィルタリングする
def photo_album(request):
queryset_list = Pictures.objects.all()
query = request.GET.get("q")
if query:
queryset_list = queryset_list.filter(
Q(pictures__icontains=query) |
Q(picture_name__icontains=query) |
Q(country__icontains=query) |
Q(city__icontains=query)
).distinct()
paginator = Paginator(queryset_list, 20)
page_request_var = "page"
page = request.GET.get(page_request_var)
try:
queryset = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
queryset = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
queryset = paginator.page(paginator.num_pages)
context = {
"object_list": queryset,
"title": "List",
"page_request_var": page_request_var,
}
return render(request, "in_country_pics/photo_album.html", context)
私のhtml：
はここに私のviews.pyであるHTMLで
<div class="container">
<div class="photo-title">
<h1>Welcome to Our Photo Album</h1>
</div>
<div class="col-sm-12 photoalbum-buttons">
<form method="GET" action="" class="row">
<div class="col-sm-6">
<div class="input-group">
<input class="form-control" type="text" name="q" placeholder="Search Posts" value="{{ request.GET.q }}"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search <i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
<div class="dropdown form-actions">
<button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-search"></i>
By Country
</button>
<ul class="dropdown-menu">
{% for obj in object_list %}
<li ><a href="#">{{ obj.country }}</a></li>
{% endfor %}
</ul>
</div>
<div class="dropdown form-actions">
<button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-search"></i>
By City
</button>
<ul class="dropdown-menu">
{% for obj in object_list %}
<li><a href="#">{{ obj.city }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<p id="photo-separator">______________________________________________</p>
<div class="row photo-post">
{% for obj in object_list %}
<div class="col-sm-3">
<div class="thumbnail">
<img src="{{ obj.pictures.url }}" class="img-responsive"/>
<div class="caption photo-description">
<p class="photo-location">{{obj.city}}, {{obj.country}}</p>
<p class="photo-time">Taken: Aug 04, 2016</p>
<p><a href="" class="btn btn-primary" type="button">View</a></p>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
<div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
、私が最初に検索バーが動作しますが、テキストとして持っています。以下の簡単なブートストラップのドロップダウンがあります。 ajaxやjqueryを使用するのが最善の場合は、私はそれを公開しています。