由于页面展示的数据过多,需要用到分页功能,故把分页功能写了一个单独的方法,用到分页功能的时候,直接引用这个方法就可以了。最终实现的效果如下图:
当点击页面上的数字,就会进行跳转,例如,点击第五页,会显示3,4,5,6,7五页,就是当点击第n页的时候,会显示该页的前两页和后两页,一共显示五个页面。如果是点击第2页,则显示的还是1,2,3,4,5这五个页面。(这是一个小bug,目前由于不影响使用,故没有进行深入研究)。
分页代码如下:
#这是一个分页方法,该文件命名为paginator.py文件。
from django.core.paginator import Paginator,EmptyPage,InvalidPage,PageNotAnInteger
def list_page(request,list):
after_range_num = 3 #当前页前显示三页
bevor_range_num = 2 #当前页后显示两页
paginator = Paginator(list,5) #list,是传过来的查好的数据
sum_page = paginator.num_pages #获得当前数据总共分页的页数
try:
page = int(request.GET.get('page'))
except:
page = 1
try:
list = paginator.page(page)
except PageNotAnInteger:
list = paginator.page(1) # 页码不是整数,返回第一页
except EmptyPage:
list = paginator.page(paginator.num_pages)
if page > after_range_num:
page_range = paginator.page_range[page - after_range_num:page + bevor_range_num] #用到的是range函数
if page > sum_page - bevor_range_num:
page_range=paginator.page_range[sum_page -after_range_num-bevor_range_num:page + sum_page] #这个if判断是为了,当点击最后两页的页数跳转时,页面只显示3个,如果加了判断的话,会显示五页
else:
page_range = paginator.page_range[0:after_range_num + bevor_range_num]
content={
'list':list,
'page_range':page_range
}
return content
当我在一个views.py文件引用该方法的时候,直接调用这个方法就可以了。如下所示:
from myapps.report.paginator import list_page
#分页代码如下
备注:传进去的activity_order_list参数是原来方法处理好的数据。直接把处理好的数据直接调用就可以了。
pagination = list_page(request,activity_order_list)
同时,需要把分页好的数据传递给前端页面进行处理。
content = {
'activity_list':pagination,
}
return render(request,'report/data_report.html',content)
而这时前端代码处理如下,主要是对数据是否有上一页和下一页是否有值进行判断,还有一些样式的处理:
<div class="managementpage">
<div class="pagination" style="width:72%">
<ul class="pager pagebox">
{% if activity_list.list.has_previous %}
<li class="previous pagebtnbox blue prev">
<a href="?page={{ activity_list.list.previous_page_number }}">
<span style="top:0px;left:-24px;">
<img src="/static/img/left.png" width="15px">
</span>
上一页</a>
</li>
{% else %}
<li class="previous disabled pagebtnbox blue prev">
<a href="#">
<span style="top:0px;left:-24px;">
<img src="/static/img/left.png" width="15px">
</span>
上一页</a>
</li>
{% endif %}
{% for p in activity_list.page_range %}
{% ifequal p activity_list.list.number %}
<li class="pagenumbox blue"><a class="noclick">{{p}}</a></li>
{% else %}
<li class="pagenumbox blue"><a href="?page={{p}}" title="第{{p}}页">{{p}}</a></li>
{% endifequal %}
{% endfor %}
{% if activity_list.list.has_next %}
<li class="next pagebtnbox blue next">
<a href="?page={{ activity_list.list.next_page_number }}">下一页
<span style="left:41px;top:0px">
<img src="/static/img/right.png" width="15px">
</span>
</a>
</li>
{% else %}
<li class="next disabled pagebtnbox blue next">
<a href="#">下一页
<span style="left:41px;top:0px;">
<img src="/static/img/right.png" width="15px">
</span>
</a>
</li>
{% endif %}
</ul>
</div>
</div>
由于想做到,点击哪一页,颜色会发生变化,所以也用了js,js代码如下:
$(function(){
//分页
$(".noclick").parent("li").addClass("darkblue");
$(".pagenumbox").click(function(){
$(".pagenumbox").removeClass("darkblue");
$(this).addClass("darkblue");
})
})
var status="";
function keyOn(){
status="";
$(".draw").each(function(){
var checked=$(this).hasClass("justjs");
if(checked==true){
status+=$(this).parents(".redtr").attr("id")+",";
}
})
$("#nextmaterialidone").val(status.slice(0,-1))
}
最后所有的功能就完成了,可能后续还会进行优化修改