A Better Pagination Component Than Django's Official Implementation + Bootstrap Integration

Preface

The pagination component that comes with Django can only be said to fulfill the pagination function, but it's just not that easy to use

Django's pagination effect

django-pure-pagination pagination effect

Usage

First, install:

pip install django-pure-pagination

Add to App

INSTALLED_APPS = (
    ...
    'pure_pagination',
)

Configure it; the configuration instructions are as shown in the figure

PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 10,
    'MARGIN_PAGES_DISPLAYED': 2,

    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

View code example

from django.shortcuts import render
from pure_pagination import Paginator
from .models import Video

def all_video(request):
    video_list = Video.objects.all()
    paginator_obj = Paginator(video_list, 10, request=request)

    ctx = {
        'page': paginator_obj.page(request.GET.get('page', 1)),
    }

    return render(request, 'video_list.html', context=ctx)

Template code

Note that the Paginator object of django-pure-pagination is a bit different from Django's built-in Paginator; they differ in usage.

Django's built-in Paginator is itself an iterator, so you can just for item in page, but django-pure-pagination is different—you have to for item in page.object_list. Mind this difference~

Therefore, django-pure-pagination needs to iterate over the objects on the page like this:

{% for video in page.object_list %}
    {% include "widgets/video_card.html" %}
{% empty %}
    <div class="alert alert-secondary" role="alert">
        视频列表获取为空！
    </div>
{% endfor %}

Paginator HTML code

It's best to write a separate paginator.html as a Django template component, then other pages can conveniently include it with {% includ "paginator.html" %}

{% load i18n %}

{% if page.paginator.num_pages > 1 %}
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            {% if page.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{{ page.previous_page_number.querystring }}">&lsaquo;&lsaquo; {% trans "previous" %}</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">&lsaquo;&lsaquo; {% trans "previous" %}</span>
                </li>
            {% endif %}

            {% for p in page.pages %}
                {% if p %}
                    {% ifequal p page.number %}
                        <li class="page-item active">
                            <span class="page-link">{{ p }}</span>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?{{ p.querystring }}">{{ p }}</a>
                        </li>
                    {% endifequal %}
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                {% endif %}
            {% endfor %}

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

Final result

References

• Official website: https://github.com/jamespacileo/django-pure-pagination/

Welcome to connect

Programming Lab focuses on exploring popular new internet technologies and practicing team agile development. Reply with linux, flutter, c#, netcore, android, kotlin, java, python, etc. in the backend of the WeChat official account “Programming Lab” to get related technical articles and materials. If you have any questions, you can also leave a message in the official account backend~

• Cnblogs: https://www.cnblogs.com/deali/
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy