Paginating Center View

In this video, we are going to learn how to paginate a function based view. In the center app, we made a view named "center list". We will learn how to paginate that view in this video.

Resources:

• Section 10 Code Files

• Pagination HTML File

Setup

First of all, download the Section 10 Project Code files from the resources section.

• Now, extract the folder on the desktop.

• Then, copy the mysite folder which is the project root directory.

• Replace the mysite folder of your project with the copied mysite folder. So, if you made any mistake while writing the code in the previous section, then, it won't affect your learning in this section.

• Open your project in the VS code and in the terminal, activate the virtual environment, and move to the mysite.

• Then, migrate the changes to the SQLite database.

• Now, create a superuser having username "admin" and password "abde@12345".

Login into your admin panel and create 6 Vaccination Center objects.

ABC Hospital, Somewhere in the city
EFG School, Somewhere in the city
IJK Hospital, Somewhere in the city
MNO Center, Somewhere in the city
PQR Hospital, Somewhere in the city
XYZ School, Somewhere in the city

View

Now, we are ready to go for implementing pagination.

At first, open your views.py file of center.

In this file, we need to import Paginator Class from django

from django.core.paginator import Paginator

We will use this Paginator class in order to paginate our queryset.

In the center_list view, at first, we need to apply ordering in the queryset. If you don't apply ordering in the queryset then the you might get inconsistent results.

So, lets order the Center by their name.

objects = Center.objects.all().order_by("name")

Now, all our center objects are ordered by their name in alphabetical order. That means we will get that center list starting from letter A.

After ordering the queryset, we will create a paginator object using the Paginator class which we imported.

paginator = Paginator(objects, 2)

As of now, we will show only 2 objects per page. Since, we have 6 different vaccination centers stored in the database so, altogether django will generate three pages for our center list.

Now, we need to keep track of page number in this view. Because, using that page number, we will know the page number, which the user is browsing.

page_number = request.GET.get("page")

In this way, you can grab any query parameters from the GET request.

After that, we need to get the center objects for that particular page number.

page_obj = paginator.get_page(page_number)

This page_obj will be a list of objects for that particular page number only.

In the context, we will pass page_obj instead of center objects.

context = {
    "page_obj": page_obj,
}

Templates

Now open your center-list template.

In the for loop, instead of iterating over center, we will iterate over page_obj which we passed in the context.

{% for object in page_obj %}

Now, just below the table tag, you need to write some code for the paginator. In the django documentation you can easily find the code under the paginator section. But for now, I have attached pagination.html file in the resources section. Download it and paste the content below the table tag.

  <div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; First</a>
            <a href="?page={{ page_obj.previous_page_number }}">Previous</a>
        {% endif %}

        <span class="current">
          Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">Next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
        {% endif %}
    </span>
  </div>

This html file is divided into 3 parts.

[Run the development server and see the changes]

In the first part, there are 2 links called First and Previous section. When you click on First, you will land in the first page and when you click on previous, you will move to one page back.

In the second part, you will get to know the page number which you are browsing.

In the third part, there are 2 links called Next and Last. When you click the next page, you will land up to the next page and when you click on Last, you will land up in the last page.

So, that was all about the basic concepts of what this html file is doing. You don't need to remember this code. You can also get this code snippet from the django documentation. Just understand the workflow of how the data is being managed in the pagination.

In this course, we will use pagination in various other videos and one thing that will be common in all the video is the html code for pagination.

So, what I will do now, I will make a separete component for the pagination and include that pagination component wherever I need it.

Therefore, in the root tempates folder, in the component, create a pagination.html file. Now, cut the html code which we wrote for pagination and move it here.

Then include this component in center-list.html file.

{% include "components/pagination.html" %}

[Run the development server and see the chanages.]

In this way, we have learnt how to paginate any function based view. In the upcoming videos, we will learn how to paginate class based view.