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

曦遠 發表於 2021-03-29

前言

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

Django的分頁效果

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

django-pure-pagination分頁效果

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

使用方法

首先安裝:

pip install django-pure-pagination

新增到App

INSTALLED_APPS = (
    ...
    'pure_pagination',
)

配置一下,配置說明如圖

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

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-paginationPaginator物件和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 %}

最終實現的效果

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

參考資料

歡迎交流

程式設計實驗室專注於網際網路熱門新技術探索與團隊敏捷開發實踐,在公眾號「程式設計實驗室」後臺回覆 linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關技術文章和資料,同時有任何問題都可以在公眾號後臺留言~

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