[Fixed]-How to show the correct object numbers when using django-pagination

by

17👍

✅

You can use the add template tag to add the current count from the paginator to the forloop

{{ forloop.counter|add:paginator.page.start_index }}
👤Timmy O'Mahony

23👍

I have used this in my template and its working properly

{{ page_obj.start_index|add:forloop.counter0 }}

Or you can use 

 {% for obj in obj_list %}
     {{ forlopp.counter0|add:obj_list.start_index }}
 {% endfor %}
👤Nids Barthwal

1👍

add paginator start index with for loop counter starting from zero

in template

{% for object in page_objects %}
    ...
    {{ forloop.counter0|add:page_objects.start_index }}
    ...
    ...
{% endfor %}

in view

objects = Abcdef.objects.all() # Abcdef is the modal
paginator = Paginator(objects, 10)
page_number = request.GET.get('page')
try:
    page_objects = paginator.page(page_number)
except PageNotAnInteger:
    page_objects = paginator.page(1)
except EmptyPage:
    page_objects = paginator.page(paginator.num_pages)    
data = {
    "page_objects" : page_objects,
}
return render(request, "template/template.html", data)
👤Aneesh R S

1👍

Follow these steps for rendering objects serial no. wise

Here I am using ListView to render objects which are very easy to use.(my model is Employee Model)

Step1: Extend Listview in views.py and replace the model on which you want to paginate.

views.py

from django.views.generic.list import ListView
from app.models import Employee


class EmployeeDetailsView(ListView):
    paginate_by = 10
    model = Employee  # model Employee with 4 fields(name, email, sex, phone)
    template_name = 'employees.html'

Step 2: Configure route in urls.py
urls.py

from .views import *
urlpatterns = [
    ...,
    path('employees/', EmployeeDetailsView.as_view(), name='get-employees'),
]

Step 3: In template render objects using the variable page_obj because adds a paginator and page_obj to the context.

employees.html

<!doctype html>
  <html>
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.rtl.min.css" integrity="sha384-WJUUqfoMmnfkBLne5uxXj+na/c7sesSJ32gI7GfCk4zO4GthUKhSEGyvQ839BC51" crossorigin="anonymous">

    <title>Employee Details</title>
   </head>
  <body>
<h1>Employee Table</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="m-4 p-2">
<table class="table table-bordered">
    <thead>
      <tr>
        <th>Sr.No.</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Sex</th>
        <th scope="col">Contact</th>
      </tr>
    </thead>
    <tbody>
        {% for emp in page_obj %}
      <tr>
       <!--The Required solution is here -->
        <th scope="row">{{ forloop.counter0|add:page_obj.start_index }}</th>
        <td>{{emp.name}}</td>
        <td>{{emp.email}}</td>
        <td>{{emp.sex}}</td>
        <td>{{emp.phone}}</td>
        <td>{{page_obj.sta}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <nav aria-label="...">
    <ul class="pagination justify-content-end">
       {% if page_obj.has_previous %}
         <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
          </li>
          <li class="page-item">
             <a class="page-link" href="?page=1" aria-label="First">
                <span aria-hidden="true">&laquo;</span>
             </a>
           </li>
            {% else %}
           <li class="page-item disabled">
              <a class="page-link">Previous</a>
           </li>
           <li class="page-item">
             <a class="page-link" href="?page=1" aria-label="First">
                <span aria-hidden="true">&laquo;</span>
              </a>
                </li>
            {% endif %}
            
            <li class="page-item">
            <a class="page-link active">
                <span class="current">
                    Page <b>{{ page_obj.number }}</b> of {{ page_obj.paginator.num_pages }}.
                </span>
            </a>
            </li>
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a>
                </li>
                
            {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.num_pages }}" aria-label="Last">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link">Next</a>
                </li>
            {% endif %}
        </ul>
      </nav>
  </div>
</body>
</html>

Here the code below will solve the given problem which I have provided in template as well.

<th scope="row">{{ forloop.counter0|add:page_obj.start_index }}</th>
👤Bhavesh Patil

Leave a comment