比Django官方實現更好的分頁元件+Bootstrap整合

曦遠發表於2021-03-29

前言

Django全家桶自帶的分頁元件只能說能滿足分頁這個功能，但是沒那麼好用就是了

Django的分頁效果

`django-pure-pagination`分頁效果

使用方法

首先安裝：

pip install django-pure-pagination

新增到App

INSTALLED_APPS = (
    ...
    'pure_pagination',
)

配置一下，配置說明如圖

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

    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

檢視程式碼例子

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)

模板程式碼

注意這個django-pure-pagination的Paginator物件和Django內建的Paginator有點不同，在用法上不同。

Django內建的Paginator本身就是迭代器了，直接for item in page就行，但是django-pure-pagination不同，得for item in page.object_list，這個區別注意一哈~

因此，django-pure-pagination需要這樣遍歷頁面內的物件：

{% for video in page.object_list %}
    {% include "widgets/video_card.html" %}
{% empty %}
    <div class="alert alert-secondary" role="alert">
        視訊列表獲取為空！
    </div>
{% endfor %}

分頁器的HTML程式碼

這裡最好是單獨寫一個paginator.html，作為Django模板元件，然後其他頁面可以很方便的使用{% 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 %}