一,手写分页
pagination.py
from django.utils.safestring import mark_safe
class Page:
def __init__(self,cur_page,total_records,perPageOfDataNum=50,perPageOfPageNum=10):
"""
:param cur_page: 鼠标点击的当前页
:param total_records: 从数据库提取的总的记录
:param perPageOfDataNum: 每一页上展示的数据量
:param perPageOfPageNum: 当前屏幕显示的页码数量
"""
self.cur_page = cur_page
self.total_records = total_records
self.perPageOfDataNum = perPageOfDataNum
self.perPageOfPageNum = perPageOfPageNum
# 当前页显示的数据
def showList(self):
self.dataList = [x for x in range(self.total_records)]
start_index = (self.cur_page - 1) * self.perPageOfDataNum
end_index = self.cur_page * self.perPageOfDataNum
showList = self.dataList[start_index:end_index]
return showList
# 所有数据一共要多少页
@property
def total_page(self):
i,r = divmod(len(self.dataList),self.perPageOfDataNum)
self.total_page1 = i+1 if r else i # 如果余数!=0,则页码数为i + 1,否则正好为i页
return self.total_page1
# 当前屏幕显示的页码
def show_page(self):
# 确认数据库构建的页码数量要大于你设置的初始值perPageOfPageNum,否则会有很多空白页码
self.perPageOfPageNum = self.total_page if self.total_page < self.perPageOfPageNum else self.perPageOfPageNum
side = self.perPageOfPageNum // 2
# 考虑页码在最左边的情况
if self.cur_page <= side:
startPage = 1
endPage = self.perPageOfPageNum + 1
# 考虑页码在最右边的情况
elif (self.total_page - self.cur_page) < side:
startPage = self.total_page - self.perPageOfPageNum + 1
endPage = self.total_page + 1
# 页码在中间的情况
else :
startPage = self.cur_page - side
endPage = self.cur_page + side + 1
pageList = []
for i in range(startPage,endPage):
if i == self.cur_page: # 点击的时候增加样式
pageList.append('<a class="p active" href="/page/?p=%s">%s</a>' % (i, i))
else:
pageList.append('<a class="p" href="/page/?p=%s">%s</a>' % (i, i))
page = "".join(pageList)
page = mark_safe(page)
return page
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pagination{
padding-top:20px;
}
.pagination .p{
display:inline-block;
padding:0 5px;
background-color:grey;
margin:0 5px;
}
.pagination .p:hover{
background-color: pink;
}
.pagination .p.active{
background-color: pink;
}
</style>
</head>
<body>
{% for item in showList %}
<li><a>{{ item }}</a></li>
{% endfor %}
<div class="pagination">
{{ page }}
</div>
<div>
{{ page_turn }}
</div>
<div>
<select id="ii" οnchange="change(this)" >
<option value="3" >3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script>
$(function () {
{# 每次触发onchange事件,会location.reload,刷新页面,这时select会回复到初始状态值,设置DOM加载完成后初始化该功能呢个并设置为上次cookie值#}
var v = $.cookie('perPageOfDataNum');
$("#ii").val(v);
console.log('v',v);
});
function change(ths) {
var val = $(ths).val();
console.log('val',val);
{# onchange事件,当值发生改变触发该事件。鼠标一点击select框,获取到select的值,并设置为cookie #}
$.cookie('perPageOfDataNum',val);
location.reload();
}
</script>
</body>
</html>
view.py
from django.utils.safestring import mark_safe
from utils import pagination
def page(request):
# 分页展示
cur_page = request.GET.get('p',1)
cur_page = int(cur_page)
pageNum = request.COOKIES.get('perPageOfDataNum',10)
p = pagination.Page(cur_page,30,int(pageNum))
showList = p.showList()
page = p.show_page()
totalPage = p.total_page
#页面跳转功能
page_turn = """
<input id="i1" type="text"/>
<a id='a' οnclick="jump(this,'/page/?p=',%d)">Go</a>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function jump(ths,base,total){ # base=/page/?p total=totalPage+1
var val = $('#i1').val();
if(val>0&&val<total){
location.href = base + val;
}
else{
alert('input must be > 0 and < ' + total);
}
}
</script>
""" % (totalPage+1,)
page_turn = mark_safe(page_turn)
return render(request, 'page.html', {'showList': showList, 'page': page,"page_turn":page_turn})
效果展示
二,使用githup上封装的模块
https://github.com/jamespacileo/django-pure-paginationsettings中添加
PAGINATION_SETTINGS = {
'PAGE_RANGE_DISPLAYED': 10,
'MARGIN_PAGES_DISPLAYED': 2,
'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}
INSTALLED_APPS = ( ... 'pure_pagination', )
业务处理
from django.shortcuts import render_to_response
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
class OrgView(View):
def get(self,request):
# 分页
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
#Orgs = CourseOrg.objects.all()
Orgs = [x for x in range(100)]
p = Paginator(Orgs,4, request=request) # 4 代表每页显示多少数据
orgs = p.page(page ) # 返回Page对象,可以看这个对象里有几个元素,此时表示第page页有4条记录。可以看这个对象有没有前页,
return render(request,'org-list.html',{"orgs":orgs})
前端
{% for obj in orgs.object_list %}
<h1>{{ obj }}</h1>
{% endfor %}
这样页面就能显示为4条数据。
下一步,添加分页导航页
{{ orgs.pages }} : [1, 2, None, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, None, 24, 25] 。这样显示是settings中的配置。PAGINATION_SETTINGS
{{ orgs.number }} :返回用户点击的页码
添加bootstrap样式
<ul class="pagination">
{% if orgs.has_previous %}
<li><a href="?{{ orgs.previous_page_number.querystring }}">«</a></li>
{% else %}
<li><a> «</a></li>
{% endif %}
{% for page in orgs.pages %}
{% if page %}
{% ifequal page orgs.number %}
<li class="active"><a>{{ page }}</a></li>
{% else %}
<li ><a href="?{{ page.querystring }}">{{ page }}</a></li>
{% endifequal %}
{% else %}
<li ><a>...</a></li>
{% endif %}
{% endfor %}
{% if orgs.has_next %}
<li><a href="?{{ orgs.next_page_number.querystring }}"> »</a></li>
{% else %}
<li><a> »</a></li>
{% endif %}
</ul>
最后显示