您的位置:首页 > 编程语言 > Go语言

django学习笔记---结合cookie,onchange事件写出一个分页

2018-03-17 22:22 525 查看
pagination.pyfrom 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" onchange="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.pyfrom 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' onclick="jump(this,'/page/?p=',%d)">Go</a>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function jump(ths,base,total){
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})


效果展示



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: