Search code examples
djangodjango-filterdjango-pagination

Django Filter, seacrh query and pagination


I have a problem using filters and pagination, I have tried so many examples I've seen here on stack overflow but nothing seems to be working. I am using CBV(ListView). The filter works but the pagination has an issue, when i click next or page 2 the filter breaks. I want the page to be paginated and show the remaining filtered items on the next page.

template.html

{% if is_paginated %}

            {% if page_obj.has_previous %}
                <a class="btn btn-info mb-4" href="?{% if object_list %}q={{ object_list }}&{% endif %}page={{ page_obj.previous_page_number }}">&laquo; Previous</a>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a class="btn btn-info mb-4" href="?{% if object_list %}q={{ filter }}&{% endif %}page={{ num }}">{{ num }}</a>
                {% endif %}
            {% endfor %}


             {% if page_obj.has_next %}
                <a class="btn btn-info mb-4" href="?{% if object_list %}q={{ object_list }}&{% endif %}page={{ page_obj.next_page_number }}">Next</a>
                <a class="btn btn-info mb-4" href="?{% if object_list %}q={{ object_list }}&{% endif %}page={{ page_obj.paginator.num_pages }}">Last &laquo;</a>
             {% endif %}

        {% endif %}

Then I used Django-filters but the filters breaks. How best will i achieve what i am looking for.

models.py

class Job(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=100)

filters.py

class SearchFilter(django_filters.FilterSet):
title = django_filters.CharFilter(lookup_expr='icontains')

    class Meta:
        model = Job
        fields = ('title',)

views.py

class SearchView(FilterView):
model = Job
template_name = 'search.html'
filterset_class = SearchFilter
ordering = ['-date']
paginate_by = 3
context_object_name = 'jobs'
strict = False

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['filter'] = SearchFilter(self.request.GET, queryset=self.get_queryset())
    return context

Solution

  • Add this in your get_context_data:

    query = self.request.GET.copy()
    if 'page' in query:
        del query['page']
    context['queries'] = query
    

    and here is a complete listview pagination:

    {% if is_paginated %}
        {% if page_obj.has_previous %}
            <li>
                <a href="?{{ queries.urlencode }}&amp;page=1"><i class="fa fa-angle-double-left"></i></a>
            </li>
            <li>
                <a href="?{{ queries.urlencode }}&amp;page={{ page_obj.previous_page_number }}"><i class="fa fa-angle-left"></i></a>
            </li>
        {% else %}
            <li>
                <a href="#"><i class="fa fa-angle-double-left"></i></a>
            </li>
            <li>
                <a href="#"><i class="fa fa-angle-left"></i></a>
            </li>
        {% endif %}
    
        {% for i in page_obj.paginator.page_range %}
            {% if page_obj.number == i %}
                <li>
                    <a href="#">{{ i }}</a>
                </li>
            {% elif i > page_obj.number|add:'-4' and i < page_obj.number|add:'4' %}
                <li>
                    <a href="?{{ queries.urlencode }}&amp;page={{ i }}">{{ i }}</a>
                </li>
            {% endif %}
        {% endfor %}
    
        {% if page_obj.has_next %}
            <li>
                <a href="?{{ queries.urlencode }}&amp;page={{ page_obj.next_page_number }}"><i class="fa fa-angle-right"></i></a>
            </li>
            <li>
                <a href="?{{ queries.urlencode }}&amp;page={{ page_obj.paginator.num_pages }}"><i class="fa fa-angle-double-right"></i></a>
            </li>
        {% else %}
            <li>
                <a href="#"><i class="fa fa-angle-right"></i></a>
            </li>
            <li>
                <a href="#"><i class="fa fa-angle-double-right"></i></a>
            </li>
        {% endif %}
    {% endif %}