Answer the question
In order to leave comments, you need to log in
How to make pagination and filtering work on the same page?
Before adding the filter, pagination worked without problems. Added a filter based on django-filters, and now only the first page gives the correct context, starting from the second page - the full list of instances is displayed. When you go to any pagination page, the output of the pagination itself disappears. This behavior corresponds to the display of objects when processing the filter. Because Initially, I did not set the task of adding pagination to the filter results, but applying it only to the complete unfiltered list.
I think the problem is in the reques.GET contained in the template for getting the filtered values. It turns out that both the filter and pagination use the GET method, when you go to the second page of pagination, the if request.GET condition for the filter is triggered, and since the filter does not contain restrictions, a complete list of elements from all pages is given. Maybe I'm wrong and the reason is different. Help me figure out how to make friends between pagination and filtering.
{% block content %}
<!-- Page Content -->
<div class="container">
<!-- Filter -->
<header class="custom-top">
<form method="get"> ### filters form
<div class="well">
<div class="row">
<div class="form-group col-sm-4 col-md-3 ">
<b>{{ filter.form.direction.label_tag }}</b>
<div class="clear"></div>
{% render_field filter.form.direction class="custom-multiple-select" %}
</div>
<div class="form-group col-sm-4 col-md-3">
<b>{{ filter.form.group.label_tag }}</b>
<div class="clear"></div>
{% render_field filter.form.group class='custom-select' %}
</div>
</div>
<div class="row">
<div class="form-group col-sm-4 col-md-3">
<input type="submit" value="Apply" class="btn btn-success filter-button">
<a href='{% url 'trainers:viewtrainers' trainer_city %}' class="btn btn-secondary filter-button float-lg-right">Clear</a>
</div>
</div>
</div>
</form>
</header>
{% if request.GET %} ### if filters apply
<div class="row text-center">
{% for trainer in filter.qs %}
{% if trainer.is_active %}
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
{% if trainer.img %}
<div class="cardimg">
<img class="card-img-top" src="{{ MEDIA_URL }}{{ trainer.img.url }}">
</div>
{% else %}
<img class="card-img-top" src="http://placehold.it/700x400">
{% endif %}
<div class="card-body ">
<h4 class="card-title">
<a href="{% url 'trainers:viewperson' trainer.slug %}">{{ trainer.name }}</a>
</h4>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Page Features -->
{% else %} ### if filter is not used
{% if trainers %}
<div class="row text-center">
{% for trainer in trainers %}
{% if trainer.is_active %}
<div class="col-lg-3 col-md-6 mb-4">
<div class="card h-100">
{% if trainer.img %}
<div class="cardimg">
<img class="card-img-top" src="{{ MEDIA_URL }}{{ trainer.img.url }}">
</div>
{% else %}
<img class="card-img-top" src="http://placehold.it/700x400">
{% endif %}
<div class="card-body ">
<h4 class="card-title">
<a href="{% url 'trainers:viewperson' trainer.slug %}">{{ trainer.name }}</a>
</h4>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Pagination--> ### Paginations
{% if trainers.has_other_pages %}
<ul class="pagination justify-content-center" style="margin:20px 0">
{% if trainers.has_previous %}
<li class="page-item"><a class="page-link" href="?page={{ trainers.previous_page_number }}">«</a></li>
{% else %}
<li class="page-item disabled"><span class="page-link" >«</span></li>
{% endif %}
{% for i in trainers.paginator.page_range %}
{% if trainers.number == i %}
<li class="page-item active"><span class="page-link">{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if trainers.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ trainers.next_page_number }}">»</a></li>
{% else %}
<li class="page-item disabled"><span class="page-link" >»</span></li>
{% endif %}
</ul>
{% endif %}
{% endif %}
</div>
<!-- /.container -->
{% endblock content %}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question