django 分頁與美化
阿新 • • 發佈：2018-03-09
django paginator django提供了分頁功能接口，比自己用切片來實現方便很多。
利用django的Paginator分頁類，加上booststrap美化前端，實現分頁功能。
目標效果如下：
利用django的Paginator分頁類，加上booststrap美化前端，實現分頁功能。
目標效果如下：
- a) 只顯示n個標簽頁，如5。
b) 選中變色。
c) 上一頁下一頁功能。
d) 若當前選中第一頁，則不再顯示上一頁標簽。
e) 若當前選中最後頁，則不再顯示下一頁。
圖例
Pagination reffer：https://docs.djangoproject.com/en/1.11/topics/pagination/
主要功能測試
PART1： 核心功能實現
-
1.1 django代碼
1.1.1 models.py
from django.db import models class Articles(models.Model): title=models.CharField(max_length=32) content=models.TextField() def __str__(self): return self.title
1.1.2 創建測試數據
from projectname.wsgi import *
from app01.models import *
for i in range(1,96):
title="title"+str(i)
content="text"+str(i)
Articles.objects.create(title=title,content=content)
1.1.3 views.py
from django.shortcuts import render,HttpResponse,redirect from .models import Articles from django.core.paginator import Paginator def page_demo(request): articles=Articles.objects.all() paginator_obj=Paginator(articles,5) #每頁5條 # print(paginator_obj.page_range) request_page_num=request.GET.get(‘page‘,1) # print(request_page_num) page_obj=paginator_obj.page(request_page_num) total_page_number=paginator_obj.num_pages return render(request,‘page_demo.html‘,{‘page_obj‘:page_obj,‘paginator_obj‘:paginator_obj})
1.1.4 url.py
from django.conf.urls import url,include
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r‘^page_demo/‘, views.page_demo),
]1.2 前端代碼
1.2.1 page_demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% for article in page_obj %} <div>## {{ article.title }} ##</div> <div>{{ article.content }}</div> {% endfor %} {% for page_num in paginator_obj.page_range %} <a href="?page={{ page_num }}">{{ page_num }}</a> {% endfor %} </body> </html>
小tip： 頁數列表paginator_obj.page_range 也可替換成page_obj.paginator.page_range 即由當前頁obj關聯。views函數可以不再向前端傳遞paginator_obj
1.2.1 頁面
翻頁
以上，功能已經實現，比較醜陋。下面進行頁面美化和功能優化。
PART2 頁面美化和功能優化
-
2.1 分頁標簽，顯示5頁
先寫個分頁標簽顯示功能，設定標簽數，WEB_DISPLAY_PAGE值。
觀察某搜索網站，當顯示偶數頁10頁時，當前頁前為5頁，當前頁後為4頁。
#!/usr/bin/env python3
# -*- coding:utf-8 -*-
# info: edit by infaaf
# blog: http://blog.51cto.com/13606158
def get_pages(totalpage=1,current_page=1):
"""
example: get_pages(10,1) result=[1,2,3,4,5]
example: get_pages(10,9) result=[6,7,8,9,10]
頁碼個數由WEB_DISPLAY_PAGE設定
"""
WEB_DISPLAY_PAGE = 5
front_offset = int(WEB_DISPLAY_PAGE / 2)
if WEB_DISPLAY_PAGE % 2 == 1:
behind_offset=front_offset
else:
behind_offset=front_offset -1
if totalpage < WEB_DISPLAY_PAGE:
return list(range(1,totalpage+1))
elif current_page<=front_offset:
return list(range(1,WEB_DISPLAY_PAGE+1))
elif current_page>=totalpage-behind_offset:
start_page=totalpage-WEB_DISPLAY_PAGE+1
return list(range(start_page,totalpage+1))
else:
start_page=current_page-front_offset
end_page=current_page+behind_offset
return list(range(start_page,end_page+1))
if __name__ == ‘__main__‘:
res=get_pages(10,1)
print(res)2.2 views.py改寫
from django.shortcuts import render,HttpResponse,redirect
from .models import Articles
from django.core.paginator import Paginator
# Create your views here.
from app01.mylib.paginator_disp_nums import get_pages
def page_demo(request):
articles=Articles.objects.all()
paginator_obj=Paginator(articles,5) #每頁5條
# print(paginator_obj.page_range)
request_page_num=request.GET.get(‘page‘,1)
# print(request_page_num)
page_obj=paginator_obj.page(request_page_num)
total_page_number=paginator_obj.num_pages
print(total_page_number)
page_list=get_pages(int(total_page_number),int(request_page_num))
return render(request,‘page_demo.html‘,{‘page_obj‘:page_obj,‘page_list‘:page_list})
2.3 前端頁面中，分頁部分加入bootstrap美化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7/css/bootstrap.css">
<body>
{% for article in page_obj %}
<div>## {{ article.title }} ##</div>
<div>{{ article.content }}</div>
{% endfor %}
<nav aria-label="Page navigation">
<ul class="pagination">
{% if page_obj.previous_page_number > 0 %}
<li>
<a href="?page={{ page_obj.previous_page_number}}" aria-label="Previous">
<span aria-hidden="true">?</span>
</a>
</li>
{% endif %}
{% for page_num in page_list %}
{% if page_num == page_obj.number %}
<li class="active"><a href="?page={{ page_num }}">{{ page_num }}</a></li>
{% else %}
<li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>
<a href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true">?</span>
</a>
</li>
{% endif %}
</ul>
</nav>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
完成，按頁次獲取不同內容，頁面標簽顯示。
django 分頁與美化