话不多说,先上效果图:
热乎乎的代码紧随其后,思路可能比较割裂,有更优雅的写法,小伙伴们多多建言哈。
后端python:
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage, InvalidPage #引入分页模块
def datalists(request):#定义返回前端的结果模块
request.encoding='utf-8'
data_list=Data_List.objects.all() #简单全表查询Data_List获取结果对象
to_page=topage(data_lilst,1)#调用分页数据模块,返回第一页数据对象
to_range=torange(to_page,1)#调用分页页码模块,返回页码列表对象
response={}#定义字典对象
response['data_list']=to_page#字典键值对
response['range_list']=to_range#字典键值对
return render(request,'data_show.html',response)#返回数据给页面data_show.html
def topage(table_list,page):#定义分页数据模块
paginator = Paginator(table_list,2)
try:
result = paginator.page(page)
except PageNotAnInteger:
# 如果请求的页数不是整数, 返回第一页。
result = paginator.page(1)
except InvalidPage:
# 如果请求的页数不存在, 重定向页面
result = paginator.page(1)
except EmptyPage:
# 如果请求的页数不在合法的页数范围内,返回结果的最后一页。
result = paginator.page(paginator.num_pages)
return result
def torange(topage,page):#定义分页页码模块
if topage.paginator.num_pages<=10:#当总页数<=10的情况,设定是最多显示10个页码,因此这里直接返回10及以内的全部页码。range方法为左闭右开:topage.paginator.num_pages+1>result>=1。
result=range(1,topage.paginator.num_pages+1)
else:#当总页数>10的情况
if page<=5:#如果当前页码在前五个页码范围内,则显示页码范围为前10个
result=range(1,11)
elif page>=topage.paginator.num_pages-4:#如果当前页码在后五个页码范围内,则显示页码范围为后10个
result=range(topage.paginator.num_pages-9,topage.paginator.num_pages+1)
else:#如果当前页码不在上述情况范围内,则显示当前页码前5个+当前页码+后4个,共计10个页码。不知是否有点绕
result=range(page-5,page+5)
return result #返回对象是一个range列表
前端html:
<tr>
<td colspan="12">
<div class="pagination-info pull-left">共{{data_list.paginator.count}}条记录,当前第{{data_list.number}}/{{data_list.paginator.num_pages}}页,每页20条记录</div>
<div class="pull-right king-page-box">
<ul class="pagination pagination-small pull-right">
{% if data_list.has_previous %}
<li id="last"><a>«</a></li>
{% endif %}
{% for item in range_list %}
{% if data_list.number == item %}
<li class="active page" ><a>{{ item }}</a></li>
{% else %}
<li><a class="page">{{ item }}</a></li>
{% endif %}
{% endfor %}
{% if data_list.has_next %}
<li id="next"><a >»</a></li>
{% endif %}
</ul>
</div>
</td>
</tr>
关于前端部分就不再赘述,愿所有开发人员的目的地都是星辰大海。