前言
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 }}">‹‹ {% trans "previous" %}</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">‹‹ {% 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" %} ››</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link disabled">{% trans "next" %} ››</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
最終實現的效果
參考資料
歡迎交流
程式設計實驗室專注於網際網路熱門新技術探索與團隊敏捷開發實踐,在公眾號「程式設計實驗室」後臺回覆 linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關技術文章和資料,同時有任何問題都可以在公眾號後臺留言~