django(18)、分頁組件開發
阿新 • • 發佈：2018-08-10
else model shortcut util utils nav 頁碼 gin 分頁組件
目錄
- 原生Paginator
- 利用bootstrap改進Paginator
- Pure_Pagination
原生Paginator
urls.py
from django.conf.urls import include, url
from app01 import views as app01_views
urlpatterns = [
url(r'^index/$', app01_views.index),
]views.py
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator from django.shortcuts import render from .models import Publisher def index(request): publishers = Publisher.objects.all() paginator = Paginator(publishers, 2) # 每頁三條數據 page = request.GET.get('page') try: contacts = paginator.page(page) except PageNotAnInteger: # If page is not an integer, deliver first page. contacts = paginator.page(1) except EmptyPage: # If page is out of range (e.g. 9999), deliver last page of results. contacts = paginator.page(paginator.num_pages) return render(request, 'index.html', locals())
index.html
<!DOCTYPE html> <html lang="en"> {% load static %} <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </head> <body> <div class="container"> <h2>機構列表</h2> <div class="row"> <table class="table table-striped"> <tr> <td>機構名稱</td> <td>機構地址</td> </tr> {% for p in contacts.object_list %} <tr> <td>{{ p.title }}</td> <td>{{ p.address }}</td> </tr> {% endfor %} </table> <div class="pagination"> <span class="step-links"> {% if contacts.has_previous %} <a href="?page={{ contacts.previous_page_number }}">previous</a> {% endif %} <span class="current"> Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}. </span> {% if contacts.has_next %} <a href="?page={{ contacts.next_page_number }}">next</a> {% endif %} </span> </div> </div> </div> </body> </html>
頁面展示
利用bootstrap改進Paginator
參考：https://v3.bootcss.com/components/#pagination-default
index.html
<!DOCTYPE html> <html lang="en"> {% load static %} {% load my_tag %} <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> </head> <body> <div class="container"> <h2>機構列表</h2> <div class="row"> <table class="table table-striped"> <tr> <td>機構名稱</td> <td>機構地址</td> </tr> {% for p in contacts.object_list %} <tr> <td>{{ p.title }}</td> <td>{{ p.address }}</td> </tr> {% endfor %} </table> <nav aria-label="Page navigation"> <ul class="pagination"> <li> {% if contacts.has_previous %} <a href="?page={{ contacts.previous_page_number }}">上一頁</a> {% endif %} </li> {% pager_list contacts %} <li> {% if contacts.has_next %} <a href="?page={{ contacts.next_page_number }}">下一頁</a> {% endif %} </li> </ul> </nav> </div> </div> </body> </html>
my_tag.py
from django.template import Library
from django.utils.safestring import mark_safe
register = Library()
@register.simple_tag
def pager_list(contacts):
pager_str = ''
for i in range(contacts.paginator.num_pages):
active = ''
# 若為當前頁面頁碼，則高亮顯示
if contacts.number == i + 1:
active = 'active'
li_str = '<li class=%s><a href="?page=%s">%s</a></li>' % (active, i + 1, i + 1)
pager_str += li_str
return mark_safe(pager_str)改進後顯示
弊端
當數據很大，頁碼數量過多，那麽一次性就不能將頁碼都顯示出來。
Pure_Pagination
安裝模塊：
- 源碼下載：https://github.com/jamespacileo/django-pure-pagination
- 利用pip安裝下載後的zip文件。
setting.py
INSTALLED_APPS = (
'pure_pagination',
)
PAGINATION_SETTINGS = {
'PAGE_RANGE_DISPLAYED': 3,
'MARGIN_PAGES_DISPLAYED': 2,
'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}PAGE_RANGE_DISPLAYED is the number of pages neighbouring the current page which will be displayed (default is 10)
MARGIN_PAGES_DISPLAYED is the number of pages neighbouring the first and last page which will be displayed (default is 2)
views.py
from django.shortcuts import render
from .models import Publisher
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
def index(request):
publishers = Publisher.objects.all()
try:
# 獲取頁碼數
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(publishers, request=request, per_page=1)
contacts = p.page(page)
return render(request, 'index.html', locals())index.html
方式1：沒有任何樣式
{{ contacts.render }}方式2：
<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<div class="container">
<h2>機構列表</h2>
<div class="row">
<table class="table table-striped">
<tr>
<td>機構名稱</td>
<td>機構地址</td>
</tr>
{% for p in contacts.object_list %}
<tr>
<td>{{ p.title }}</td>
<td>{{ p.address }}</td>
</tr>
{% endfor %}
</table>
{% load i18n %}
<nav >
<ul class="pagination{% if size %} pagination-{{ size }}{% endif %}">
{% if contacts.has_previous %}
<li class="previous">
<!--此處攜帶當前頁的過濾字段參數，-->
<a href="?{{ contacts.previous_page_number.querystring }}"
aria-label="{% trans 'previous page' %}">
<span aria-hidden="true">上一頁</span>
{% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
</a>
</li>
{% else %}
<li class="previous disabled">
<span>
<span aria-hidden="true">上一頁</span>
{% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
</span>
</li>
{% endif %}
{% for page in contacts.pages %}
{% if page %}
{% if page == contacts.number %}
<li class="active">
<a href="?{{ page.querystring }}">{{ page }} <span
class="sr-only">({% trans 'current page' %})</span></a>
</li>
{% else %}
<li>
<a href="?{{ page.querystring }}">{{ page }}</a>
</li>
{% endif %}
{% else %}
<li class="disabled">
<span>...</span>
</li>
{% endif %}
{% endfor %}
{% if contacts.has_next %}
<li class="next">
<a href="?{{ contacts.next_page_number.querystring }}" aria-label="{% trans 'next page' %}">
{% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
<span aria-hidden="true">下一頁</span>
</a>
</li>
{% else %}
<li class="next disabled">
<span>
{% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
<span aria-hidden="true">下一頁</span>
</span>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
</body>
</html>5、最終效果展示
django(18)、分頁組件開發