How to add pagination in search.html - django - django

Question

how to create pagination in search.html ?
i want show 4 posts per page
what must I do now ?
any help please and thanks
this is my views.py :
class SearchView(ListView):
template_name = 'website_primary_html_pages/search.html'
paginate_by = 20
count = 0
def get_context_data(self, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
context['count'] = self.count or 0
context['query'] = self.request.GET.get('q')
return context
def get_queryset(self):
request = self.request
query = request.GET.get('q', None)
if query is not None:
android_results = Android.objects.search(query)
linux_results = Linux.objects.search(query)
tech_results = Tech.objects.search(query)
mobile_results = Mobile.objects.search(query)
windows_results = Windows.objects.search(query)
# combine querysets
queryset_chain = chain(
android_results,
linux_results,
tech_results,
mobile_results,
windows_results
)
qs = sorted(queryset_chain,
key=lambda instance: instance.pk,
reverse=True)
self.count = len(qs) # since qs is actually a list
return qs
return Android.objects.none() # just an empty queryset as default
and here is my search.html :
{% for object in object_list %}
{% with object|class_name as klass %}
{% if klass == 'Mobile' %}
<div class="card-deck">
<div class="card mb-3" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="card-body">
<b>{{ object.name }}</b></h5>
<p class="card-text" id="font_control_for_all_pages">{{ object.app_contect|truncatechars_html:153|safe}}</p>
</div>
<div class="card-footer">
<small class="text-muted" id="date_post_control">{{ object.post_date}}</small>
<small class="firstsmall"><a class="bg-orange" href="{% url 'mobile' %}" id="tag_name_control">هواتف</a></small>
</div>
</div>
</div>
</div>
</div>
<hr>
{% elif klass == 'Linux' %}
<div class="card-deck">
<div class="card mb-3" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="card-body">
<b>{{ object.name }}</b></h5>
<p class="card-text" id="font_control_for_all_pages">{{ object.app_contect|truncatechars_html:153|safe}}</p>
</div>
<div class="card-footer">
<small class="text-muted" id="date_post_control">{{ object.post_date}}</small>
<small class="firstsmall"><a class="bg-orange" href="{% url 'linux' %}" id="tag_name_control">لينكس</a></small>
</div>
</div>
</div>
</div>
</div>
<hr>
{% else %}
{% endif %}
{% endwith %}
{% empty %}
<div class='row'>
<div class='col-12 col-md-6 mx-auto my-5 py-5'>
<form method='GET' class='' action="{% url 'search' %}">
<div class="input-group form-group-no-border mx-auto" style="margin-bottom: 0px; font-size: 32px;">
<span class="input-group-addon cfe-nav" style='color:#000'>
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" name="q" data-toggle="popover" data-placement="bottom" data-content="Press enter to search" class="form-control cfe-nav mt-0 py-3" placeholder="Search..." value="" style="" data-original-title="" title="" autofocus="autofocus">
</div>
</form>
</div>
</div>
{% endfor %}
what i must add in html page and views.py ?
i want This display for example , like this example :
Page 2 of 3. next back
how to do this and thanks :)

Answer 1

Change object_list in your template to page_obj:
{% for object in page_obj %}
Correct field paginate_by in your SearchView:
class SearchView(ListView):
template_name = 'website_primary_html_pages/search.html'
paginate_by = 4
Add paginator at the bottom of your template, all the pages of such "search paginator" should have all the queries that you search had, for example:
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{%endfor%}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{%endfor%}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{%endfor%}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{%endfor%}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{%endfor%}">Last</a>
{% endif %}
{% endif %}