django用paginator进行分页

摘要: 由于页面展示的数据过多，需要用到分页功能，故把分页功能写了一个单独的方法，用到分页功能的时候，直接引用这个方法就可以了。

由于页面展示的数据过多，需要用到分页功能，故把分页功能写了一个单独的方法，用到分页功能的时候，直接引用这个方法就可以了。最终实现的效果如下图：



当点击页面上的数字，就会进行跳转，例如，点击第五页，会显示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))

}

最后所有的功能就完成了，可能后续还会进行优化修改