Home > Net >  How to add paginator and filter in your website?
How to add paginator and filter in your website?

Time:11-30

I'm doing a project in which I need to display cars and the user is allowed to filter their queries based on price, make, model etc. Earlier today the filter was not working but the Paginator was, but now, the filter is working and the paginator is not. I've been stuck on this the whole day and I don't know what else to do.

This is my code:

views.py

def posts(request):
    cars = Userpost.objects.all()


    myFilter = UserpostFilter(request.GET, queryset=cars)
    cars = myFilter.qs

    p = Paginator(Userpost.objects.all(), 2)
    page = request.GET.get('page')
    cars_list = p.get_page(page)
    nums = "a" * cars_list.paginator.num_pages

    context = {'cars':cars, "myFilter":myFilter, 'cars_list':cars_list, "nums":nums}
    return render(request, 'store/userposts.html', context)

userposts.html

{% extends 'store/main.html' %}
{% load static %}

{% block content %}

<div class = 'row'>
  <div class = 'col'>
    <div class = 'card card-body'>
        <form method="get">
          {{myFilter.form}}
        <button class="btn btn-primary" type = "submit">Search</button>
        </form>
    </div>
  </div>
</div>

<div class="row">
    {% for car in cars %}
    <div class="col-lg-4">
        <img class="thumbnail" src="{{car.imageURL|default:'/images/transparentLogo.png'}}">
        <div class="box-element product">
            <h6><strong>{{car.Year}} {{car.Make}} {{car.Model}}</strong></h6>
            <hr>
            <a class="btn btn-outline-success" href="{% url 'post_detail' car.pk %}">View</a>
            <h4 style="display: inline-block; float: right"><strong>${{car.Price|floatformat:2}}</strong></h4>

        </div>
    </div>
    {% endfor %}
</div>


<nav aria-label="Page navigation">   <ul class="pagination">
    {% if cars_list.has_previous %}
    <li class="page-item">
      <a class="page-link" href="?page=1" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">begin</span>
      </a>
    </li>   {% endif %}
    
    {% for n in cars_list.paginator.page_range %}
      {% if cars_list.number == n %}
        <li class="page-item active">
          <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
        </li>
      {% elif n > cars_list.number|add:'-3' and n < cars_list.number|add:'3' %}
        <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
      {% endif %}
    {% endfor %}
    
    {% if cars_list.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ cars_list.paginator.num_pages }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">end</span>
        </a>
      </li>
      {% endif %}   </ul> </nav>

<br/>
    
{% endblock content %}

filters.py

class UserpostFilter(django_filters.FilterSet):
    start_date = DateFilter(field_name = "date_published", lookup_expr = 'gte')
    end_date = DateFilter(field_name = "date_published", lookup_expr = 'lte')
    min_price = django_filters.NumberFilter(field_name="Price", lookup_expr='gte')
    max_price = django_filters.NumberFilter(field_name="Price", lookup_expr='lte')
    class Meta:
        model = Userpost
        field = '__all__'
        exclude = 'image', 'user', 'Price', 'Email', 'date_published'

I noticed that when i change the for loop on userposts.html to do "for car in cars_list", the pagination works but it breaks the filter, and using "for car in cars" makes the filter works but the pagination breaks.

I don't know what to do about it and I would really appreciate some help

CodePudding user response:

try this

def posts(request):
    cars = Userpost.objects.all()
    myFilter = UserpostFilter(request.GET, queryset=cars)
    if myFilter.qs:
        cars = myFilter.qs
    paginator = Paginator(cars, 2)
    page = request.GET.get('page')
    try:
        cars = paginator.page(page)
    except PageNotAnInteger:
        cars = paginator.page(1)
    except EmptyPage:
        cars = paginator.page(paginator.num_pages)
    context = {'cars_list':cars, "myFilter":myFilter}
    return render(request, 'store/userposts.html', context)

template

{% extends 'store/main.html' %}
{% load static %}

{% block content %}

<div class = 'row'>
  <div class = 'col'>
    <div class = 'card card-body'>
        <form method="get">
          {{myFilter.form}}
        <button class="btn btn-primary" type = "submit">Search</button>
        </form>
    </div>
  </div>
</div>

<div class="row">
    {% for car in cars_list %}
    <div class="col-lg-4">
        <img class="thumbnail" src="{{car.imageURL|default:'/images/transparentLogo.png'}}">
        <div class="box-element product">
            <h6><strong>{{car.Year}} {{car.Make}} {{car.Model}}</strong></h6>
            <hr>
            <a class="btn btn-outline-success" href="{% url 'post_detail' car.pk %}">View</a>
            <h4 style="display: inline-block; float: right"><strong>${{car.Price|floatformat:2}}</strong></h4>

        </div>
    </div>
    {% endfor %}
</div>


<nav aria-label="Page navigation">   <ul class="pagination">
    {% if cars_list.has_previous %}
    <li class="page-item">
      <a class="page-link" href="?page=1" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">begin</span>
      </a>
    </li>   {% endif %}
    
    {% for n in cars_list.paginator.page_range %}
      {% if cars_list.number == n %}
        <li class="page-item active">
          <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
        </li>
      {% elif n > cars_list.number|add:'-3' and n < cars_list.number|add:'3' %}
        <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
      {% endif %}
    {% endfor %}
    
    {% if cars_list.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ cars_list.paginator.num_pages }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">end</span>
        </a>
      </li>
      {% endif %}   </ul> </nav>

<br/>
    
{% endblock content %}
  • Related