背景介紹
python3環境,前後端不分離,前端使用bootstrap2框架,後端使用django2.0框架,包含分頁前端代碼以及後端實現,只是個人日常記錄,僅供參考
前端代碼
<div class="blog_list_footer">
<span class="blog_footer_tip">
共{{ pages.count }}條記錄。
當前第{{ contacts.number }}頁,
共{{ pages.num_pages }}頁
</span>
<div class="pagination pagination-centered">
<ul>
<li>
{!--用戶包含搜索狀態分頁的實現--}
<a href="?page={% if contacts.has_previous %}{{ contacts.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
{% else %}
{{ contacts.number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
{% endif %}
" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% for page in pages.page_range_ex %}
{% if page == '...' %}
<li><span>...</span></li>
{% else %}
<li><a href="?page={{ page }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}">{{ page }}</a>
</li>
{% endif %}
{% endfor %}
<li>
<a href="?page={% if contacts.has_next %}{{ contacts.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
{% else %}
{{ contacts.number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}
{% endif %}
" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
{# 頁碼跳轉的html代碼 #}
<ul class="pagination">
<li id="page_goto">
<span>
<input type="text" value="{{ paginator.page_goto }}"/>
</span>
</li>
<li><a href="javascript:void(0);" onClick="page_goto();">Go</a></li>
</ul>
</div>
</div>
<style type="text/css">
{#頁碼跳轉的顯示樣式#}
#page_goto span {
padding: 0 4px;
height: 28px;
}
#page_goto input {
border: none;
padding: 0;
width: 2em;
text-align: center;
}
.pagination ul > .active > a {
background-color: #337ab7;
}
</style>
<script type="text/javascript">
{#設置凸顯當前頁碼#}
$(".pagination li a").each(function () {
if ($(this).text() == "{{contacts.number}}") {
$(this).parent().addClass("active");
}
});
{#頁碼跳轉處理#}
function page_goto() {
var page = $("#page_goto input")[0].value;
window.location.href = '?page=' + page; //重定向
return false;
}
</script>
後端實現代碼
# 生成分頁信息,以及返回分頁數據方法,視圖函數直接調用傳入request對象,以及數據list即可
def getPage(request, objectList):
"""get the paginator"""
currentPage = request.GET.get('page', 1)
paginator = Paginator(objectList, settings.EACHPAGE_NUMBER)
objectlist = paginator.page(currentPage)
page_range = []
current = objectlist.number # 當前頁碼
page_all = paginator.num_pages # 總頁數
mid_pages = 3 # 中間段顯示的頁碼數
page_goto = 1 # 默認跳轉的頁碼
# 獲取優化顯示的頁碼列表
if page_all <= 2 + mid_pages:
# 頁碼數少於6頁就無需分析哪些地方需要隱藏
page_range = paginator.page_range
else:
# 添加應該顯示的頁碼
page_range += [1, page_all]
page_range += [current - 1, current, current + 1]
# 若當前頁是頭尾,範圍拓展多1頁
if current == 1 or current == page_all:
page_range += [current + 2, current - 2]
# 去掉超出範圍的頁碼
page_range = filter(lambda x: x >= 1 and x <= page_all, page_range)
# 排序去重
page_range = sorted(list(set(page_range)))
# 查漏補缺
# 從第2個開始遍歷,查看頁碼間隔,若間隔爲0則是連續的
# 若間隔爲1則補上頁碼;間隔超過1,則補上省略號
t = 1
for i in range(len(page_range) - 1):
step = page_range[t] - page_range[t - 1]
if step >= 2:
if step == 2:
page_range.insert(t, page_range[t] - 1)
else:
page_goto = page_range[t - 1] + 1
page_range.insert(t, '...')
t += 1
t += 1
# 優化結果之後的頁碼列表
paginator.page_range_ex = page_range
# 默認跳轉頁的值
paginator.page_goto = page_goto
return paginator, objectlist
後端視圖調用
class PlayerManageView(View):
def get(self, request):
# 條件過濾
status = request.GET.get('status')
start_time = request.GET.get('start_time')
end_time = request.GET.get('end_time')
search = request.GET.get('search')
player_list= Player.objects.all()
pages, player_list= getPage(request, player_list)
context = {
'player_list': player_list,
'pages': pages
}
return render(request, 'user_manage/userList.html', context)