前言
使用django自帶的Paginator分頁器集合bootstrap的pagination控件可以實現分頁功能，
如果頁數較大的時候，希望能顯示省略號+當前頁，這樣看起來更美觀一點。
自定義分頁功能
自定義一個分頁功能，當分頁導航欄數量很多時，多的頁碼顯示省略號...,傳3個參數
- paginator Paginator分頁器實例對象
- page Page類實例對象，paginator.page(頁碼數)獲取
- is_paginated=True 是否需要顯示分頁導航欄
def pagination_function(paginator, page, is_paginated=True):
if not is_paginated:
# 如果沒有分頁，則無需顯示分頁導航條，不用任何分頁導航條的數據，因此返回一個空的字典
return {}
# 當前頁左邊連續的頁碼號，初始值為空
left = []
# 當前頁右邊連續的頁碼號，初始值為空
right = []
# 標示第 1 頁頁碼后是否需要顯示省略號
left_has_more = False
# 標示最后一頁頁碼前是否需要顯示省略號
right_has_more = False
# 標示是否需要顯示第 1 頁的頁碼號。
# 因為如果當前頁左邊的連續頁碼號中已經含有第 1 頁的頁碼號，此時就無需再顯示第 1 頁的頁碼號，
# 其它情況下第一頁的頁碼是始終需要顯示的。
# 初始值為 False
first = False
# 標示是否需要顯示最后一頁的頁碼號。
# 需要此指示變量的理由和上面相同。
last = False
# 獲得用戶當前請求的頁碼號
page_number = page.number
# 獲得分頁后的總頁數
total_pages = paginator.num_pages
# 獲得整個分頁頁碼列表，比如分了四頁，那么就是 [1, 2, 3, 4]
page_range = paginator.page_range
if page_number == 1:
# 如果用戶請求的是第一頁的數據，那么當前頁左邊的不需要數據，因此 left=[]（已默認為空）。
# 此時只要獲取當前頁右邊的連續頁碼號，
# 比如分頁頁碼列表是 [1, 2, 3, 4]，那么獲取的就是 right = [2, 3]。
# 注意這里只獲取了當前頁碼后連續兩個頁碼，你可以更改這個數字以獲取更多頁碼。
right = page_range[page_number:page_number + 2]
# 如果最右邊的頁碼號比最后一頁的頁碼號減去 1 還要小，
# 說明最右邊的頁碼號和最后一頁的頁碼號之間還有其它頁碼，因此需要顯示省略號，通過 right_has_more 來指示。
if right[-1] < total_pages - 1:
right_has_more = True
# 如果最右邊的頁碼號比最后一頁的頁碼號小，說明當前頁右邊的連續頁碼號中不包含最后一頁的頁碼
# 所以需要顯示最后一頁的頁碼號，通過 last 來指示
if right[-1] < total_pages:
last = True
elif page_number == total_pages:
# 如果用戶請求的是最后一頁的數據，那么當前頁右邊就不需要數據，因此 right=[]（已默認為空），
# 此時只要獲取當前頁左邊的連續頁碼號。
# 比如分頁頁碼列表是 [1, 2, 3, 4]，那么獲取的就是 left = [2, 3]
# 這里只獲取了當前頁碼后連續兩個頁碼，你可以更改這個數字以獲取更多頁碼。
left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1]
# 如果最左邊的頁碼號比第 2 頁頁碼號還大，
# 說明最左邊的頁碼號和第 1 頁的頁碼號之間還有其它頁碼，因此需要顯示省略號，通過 left_has_more 來指示。
if left[0] > 2:
left_has_more = True
# 如果最左邊的頁碼號比第 1 頁的頁碼號大，說明當前頁左邊的連續頁碼號中不包含第一頁的頁碼，
# 所以需要顯示第一頁的頁碼號，通過 first 來指示
if left[0] > 1:
first = True
else:
# 用戶請求的既不是最后一頁，也不是第 1 頁，則需要獲取當前頁左右兩邊的連續頁碼號，
# 這里只獲取了當前頁碼前后連續兩個頁碼，你可以更改這個數字以獲取更多頁碼。
left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1]
right = page_range[page_number:page_number + 2]
# 是否需要顯示最后一頁和最后一頁前的省略號
if right[-1] < total_pages - 1:
right_has_more = True
if right[-1] < total_pages:
last = True
# 是否需要顯示第 1 頁和第 1 頁后的省略號
if left[0] > 2:
left_has_more = True
if left[0] > 1:
first = True
data = {
'left': left,
'right': right,
'left_has_more': left_has_more,
'right_has_more': right_has_more,
'first': first,
'last': last,
}
return data
參考博客https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/
視圖函數
視圖函數返回模板所需要的對象
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
def teachersViewP(request):
teachers = Teacher.objects.all()
paginator = Paginator(teachers, per_page=10)
page_num = request.GET.get('page', 1)
try:
page_num = int(page_num)
except:
page_num = 1
if page_num<1 or page_num>paginator.num_pages:
page_num = 1
is_paginated = True
page_object = paginator.get_page(page_num)
data = pagination_function(paginator, page_object, is_paginated)
return render(request, 'teacher.html', locals())
模板實現
模板結合bootstrap框架實現前端分頁展示
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 分頁的狀態</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>分頁器加載table表格</h3>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>電話</th>
</tr>
</thead>
<tbody>
{% for field in page_object %}
<tr>
<td>{{ field.name }}</td>
<td>{{ field.age }}</td>
<td>{{ field.tel }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if is_paginated %}
<ul class="pagination pull-right">
{% endif %}
{#上一頁按鈕開始#}
{# 如果當前頁有上一頁#}
{% if page_object.has_previous %}
{# 當前頁的上一頁按鈕正常使用#}
<li class="previous"><a href="?page={{ page_object.previous_page_number }}">上一頁</a></li>
{% else %}
{# 當前頁的不存在上一頁時,上一頁的按鈕不可用#}
<li class="previous disabled"><a href="#">上一頁</a></li>
{% endif %}
{#上一頁按鈕結束#}
{% if data.first %}
<li class="page"><a href="?page=1">1</a></li>
{% endif %}
{% if data.left %}
{% if data.left_has_more %}
<li class="page"><a href="javascript:void(0)">...</a></li>
{% endif %}
{% for i in data.left %}
<li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
{% endfor %}
{% endif %}
<li class="page active" ><a href="javascript:void(0)"> {{ page_num }}</a></li>
{% if data.right %}
{% for i in data.right %}
<li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
{% endfor %}
{% if data.right_has_more %}
<li class="page"><a href="javascript:void(0)">...</a></li>
{% endif %}
{% endif %}
{% if data.last %}
<li class="page"><a
href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
</li>
{% endif %}
{% if page_object.has_next %}
<li class="next"><a href="?page={{ page_object.next_page_number }}">下一頁</a></li>
{% else %}
<li class="next disabled"><a href="#">下一頁</a></li>
{% endif %}
{# 下一頁按鈕結束#}
</ul>
</div>
</body>
</html>
實現效果
頁碼效果展示
中間頁碼顯示省略號
