CODEWITHSUNDEEP
pythonhtmldjango
Marcgames_YT
Marcgames_YT

Reputation: 75

Django paginator issue

I am currently working on a django blog and I've coded a search bar where you type something and, if there's any post that contains what you've typed in the title, it should appear all the posts. This part is perfectly well-written. However, there's an error with the pagination. As you'll see in the views.py. The maximum num of posts per page is 3. However, you can see there's four. However, the paginator detects there should be another page for the fourth posts. Here's an image that shows that.

enter image description here

Here's the views.py:

class ElementSearchView(View):
    elements_list = Element.objects.all()


    def get(self, request, *args, **kwargs):

        paginator = Paginator(self.elements_list, 3)
        page_request_var = 'page'
        page = request.GET.get(page_request_var)
        try:
            paginated_queryset = paginator.page(page)
        except PageNotAnInteger:
            paginated_queryset = paginator.page(1)
        except EmptyPage:
            paginated_queryset = paginator.page(paginator.num_pages)
        queryset = Element.objects.all()
        query = request.GET.get('q')
        if query:
            queryset = queryset.filter(
                Q(title__icontains=query) 
            ).distinct()

        context = {
            'query': queryset,
            'queryset': paginated_queryset,
            'page_request_var': page_request_var,
        }
        return render(request, 'periodic/search_results_table.html', context)

And here's the html template: The pagination is at the end of the template.

{% load static %}


<html>
{% include 'periodic/head_search.html' %}
<body>
    {% include 'periodic/header.html' %}
<br>
<br>
<div class="container">
  <div class="row">
    <!-- Latest Posts -->
    <main class="posts-listing col-lg-8"> 
      <div class="container">
        <div class="row">
          <!-- post -->
          {% for element in query %}
          <div class="post col-xl-6 wrap-login100">
            <div class="post-thumbnail"><a href="{{ element.get_absolute_url }}"><img src="{{ element.thumbnail.url }}" alt="..." class="img-fluid"></a></div>
            <div class="post-details">
              <a href="{{ element.get_absolute_url }}">
                <h3 class="h4">{{ element.title }}</h3></a>
            </div>
          </div>
          {% endfor %}
        </div>
        <!-- Pagination -->
        <nav aria-label="Page navigation example">
          <ul class="pagination pagination-template d-flex justify-content-center">
            {% if queryset.has_previous %}                
            <li class="page-item"><a href="?{{ page_request_var }}={{ queryset.previous_page_number }}" class="page-link"> <i class="fa fa-angle-left"></i></a></li>
            {% endif %}
            <li class="page-item"><a href="?{{ page_request_var }}={{ queryset.number }}" class="page-link active">{{ queryset.number }}</a></li>
            {% if queryset.has_next %}
            <li class="page-item"><a href="?{{ page_request_var }}={{ queryset.next_page_number }}" class="page-link"> <i class="fa fa-angle-right"></i></a></li>
            {% endif %}
          </ul>
        </nav>

        {% if is_paginated %}
        
        <nav aria-label="Page navigation example">
          <ul class="pagination pagination-template d-flex justify-content-center">
            {% if page_obj.has_previous %}                
            <li class="page-item"><a href="?{{ page_request_var }}={{ page_obj.previous_page_number }}" class="page-link"> <i class="fa fa-angle-left"></i></a></li>
            {% endif %}
            <li class="page-item"><a href="?{{ page_request_var }}={{ page_obj.number }}" class="page-link active">{{ page_obj.number }}</a></li>
            {% if page_obj.has_next %}
            <li class="page-item"><a href="?{{ page_request_var }}={{ page_obj.next_page_number }}" class="page-link"> <i class="fa fa-angle-right"></i></a></li>
            {% endif %}
          </ul>
        </nav>
        
        {% endif %}
      </div>
    </main>
</body>
{% include 'periodic/scripts_search.html' %}
</html>

Upvotes: 0

Views: 134

Answers (1)

AzyCrw4282
AzyCrw4282

Reputation: 7744

As the user @ikilnac mentioned,

you are looping over the original queryset and not the paged one in your template

That simply means that in your loop, you do this

  {% for element in query %}
  <div class="post col-xl-6 wrap-login100">
    <div class="post-thumbnail"><a href="{{ element.get_absolute_url }}"><img src="{{ element.thumbnail.url }}" alt="..." class="img-fluid"></a></div>
    <div class="post-details">
      <a href="{{ element.get_absolute_url }}">
        <h3 class="h4">{{ element.title }}</h3></a>
    </div>
  </div>
  {% endfor %}

And then after that, you are using the tag in the form of {% if queryset.has_previous %} with the original queryset rather than the paged one in the template (the query).
There's a good example of it here - Paginate with Django

Upvotes: 1

Related Questions