how to add paginations in a django project

created at March 13, 2021, 7:35 a.m.

Paginations are often used in listviews of django projects, such as article list, question list and so on. A pagination allow our users read more items of contents without scroll too much in a single page.

adding pagination to django blog

here we would use a django blog as an example.

To add pagination, we would modify the views of this app, more specifically, the ListView:

class ArticlesListView(ListView):
    model = Article
    paginate_by = 10  # adding this line to enable pagination
    context_object_name = "articles"
    template_name = 'articles/article_list.html'

we just added a statement paginate_by = 10 to our list view. if you want to have more items in a single page, you can change the number 10 to any other integer number.

now the backend part is end.

pagination.html

Now we would write a resusable html file to show paginations in our frontend.

Below is a code snippet of pagination, we can use directly without modifying variables in this snippet.

{% if is_paginated %}
    <nav aria-label="Topics pagination" class="mb-4">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">previous</span>
                </li>
            {% endif %}

            {% for page_num in paginator.page_range %}
                {% if page_obj.number == page_num %}
                    <li class="page-item active">
                            <span class="page-link">
                                {{ page_num }}
                                <span class="sr-only">(present)</span>
                            </span>
                    </li>
                {% elif page_num > page_obj.number|add:'-3' and page_num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">next</span>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}

to use this snippet, we would first create a file named pagination.html under our templates/ directory, so that we can reuse this snippet whenever we need:

 app
    ├── templates
    │   ...
    │   ├── pagination.html

and copy the snippet into this file and save.

the html snippet above are based on Bootstrap css. So if you don't use Bootstrap, your may need to customize the css style of the pagination.

show pagination

now you just need to add this line to wherever you want to show a pagination in your templates:

{% include 'pagination.html' %}
Please log in to leave a comment.