背景介绍
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)