# 創建項目 page_project
配置settings
啓動
# 導入分頁器相關模塊
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
查看urls
from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', views.index), ]
查看views ，測試一條數據 ，準備數據100條
def index(request):
# 插入一條數據
# book_1 = Book(title='python', price="60")
# book_1.save()
Booklist = []
for i in range(100):
Booklist.append(Book(title="book" + str(i), price=30 + i * 2))
Book.objects.bulk_create(Booklist)
"""
:param request:
:return:
"""
return HttpResponse("index")查看 一條數據 sqllite
查看插入的100條數據
功能1、展示數據裏面的所有數據
def index(request): # 分頁器 book_list = Book.objects.all() print(book_list, type(book_list)) return render(request, "index.html", locals())
html 頁面
前端頁面顯示如下
功能2、分頁器常用的功能
views
book_list = Book.objects.all()
paginator = Paginator(book_list, 3) # 每頁顯示三條數據
print(paginator, type(paginator))
print("count:", paginator.count) # 數據總數
print("num_pages", paginator.num_pages) # 總頁數
print("page_range", paginator.page_range) # 頁碼的列表訪問頁面刷新獲取數據
# 顯示首頁數據
views
first_page = (request.GET.get()) first_page_data = paginator.page(first_page)
index .html
顯示首頁 {% %}
{{ .}} ---{{ .}}
{% %}前端訪問顯示
功能三、根據請求頁面數顯示不同頁面的數據，不存在的頁面數據就顯示首頁
try:
current_page_number = int(request.GET.get("page", 1))
if current_page_number < 34:
current_page = paginator.page(current_page_number)
elif current_page_number < 0:
current_page = paginator.page(current_page_number)
else:
current_page = paginator.page(1)
except EmptyPage as e:
current_page = paginator.page(1)
index.html
當前頁面爲 {% %}
{{ .}} ---{{ .}}
{% %}訪問展示
超出34 頁面默認顯示首頁
功能四、引入bootstrap 和 分頁 格式 豐富樣式
views
def index(request):
# 分頁器
book_list = Book.objects.all()
paginator = Paginator(book_list, 10) # 每頁顯示三條數據
print(paginator, type(paginator))
page_range = paginator.page_range
print("count:", paginator.count) # 數據總數
print("num_pages", paginator.num_pages) # 總頁數
print("page_range", paginator.page_range) # 頁碼的列表
# 根據請求頁面數顯示不同頁面的數據，不存在的頁面數據就顯示首頁
try:
current_page_num= int(request.GET.get("page", 1))
current_page = paginator.page(current_page_num)
print(current_page, type(current_page))
print("object_list", current_page.object_list)
except EmptyPage as e:
current_page = paginator.page(1)
return render(request, "index.html", locals())index 頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> index</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <br> <p> 當前頁面爲 </p> <ul> {% for book in current_page %} <li>{{ book.title }}:{{ book.price }}</li> {% endfor %} </ul> <p> 顯示頁碼 </p> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true"> 上一頁</span> </a> </li> <p> 循環遍歷 頁碼數 </p> {% for item in paginator.page_range %} <p> 當顯示當前頁面的時候加藍 </p> {% if current_page_num == item %} <li class="active"><a href="?page={{ item }}"> {{ item }} </a> </li> {% else %} <li><a href="?page={{ item }}"> {{ item }} </a> </li> {% endif %} {% endfor %} <li> <a href="#" aria-label="Next"> <span aria-hidden="true"> 下一頁 </span> </a> </li> </ul> </nav> </body> </html>
頁面效果
顯示上一頁，下一頁
# 根據循環當前的頁面 進行判斷 current_page
上一頁使用 current_page|add:-1 或者 current_page.previous_page_number
下一頁 使用 current_page|add:+1 或者 current_page.next_page_number
<li>
{% if current_page.has_previous %}
<a href="?page ={{ current_page|add:-1 }}" aria-label="Previous">
{# <a href="?page ={{ current_page.previous_page_number }}" aria-label="Previous">#}
<span aria-hidden="true"> 上一頁</span>
</a>
{% else %}
<li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>
{% endif %}
</li>
<li>
{% if current_page.has_next %}
<a href="?page= {{ current_page|add:+1}}" aria-label="Next">
{# <a href="?page= {{ current_page.next_page_number }}" aria-label="Next">#}
<span aria-hidden="true"> 下一頁 </span>
</a>
{% else %}
<li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一頁</span></a>
{% endif %}
</li>查看頁面
顯示默認的五頁
views 代碼
if paginator.num_pages > 11: if current_page_num - 5 < 1: page_range = range(1, 12) elif current_page_num + 5 > paginator.num_pages: page_range = range(paginator.num_pages - 10, paginator.num_pages + 1) else: page_range = range(current_page_num - 5, current_page_num + 6) else: page_range = paginator.page_range
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> index</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <br> <p> 當前頁面爲 </p> <ul> {% for book in current_page %} <li>{{ book.title }}:{{ book.price }}</li> {% endfor %} </ul> <p> 顯示頁碼 </p> <nav aria-label="Page navigation"> <ul class="pagination"> <li> {% if current_page.has_previous %} <a href="?page ={{ current_page|add:-1 }}" aria-label="Previous"> {# <a href="?page ={{ current_page.previous_page_number }}" aria-label="Previous">#} <span aria-hidden="true"> 上一頁</span> </a> {% else %} <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li> {% endif %} </li> {% for item in page_range %} {% if current_page_num == item %} <li class="active"><a href="?page={{ item }}">{{ item }}</a></li> {% else %} <li><a href="?page={{ item }}">{{ item }}</a></li> {% endif %} {% endfor %} <li> {% if current_page.has_next %} <a href="?page= {{ current_page|add:+1}}" aria-label="Next"> {# <a href="?page= {{ current_page.next_page_number }}" aria-label="Next">#} <span aria-hidden="true"> 下一頁 </span> </a> {% else %} <li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一頁</span></a> {% endif %} </li> </ul> </nav> </body> </html>
頁面顯示
