背景:django自带的分页组件不能很好的支持页码操作
实现:结合bootstrap自定义分页组件
组件:
# 自定义分页组件
class SplitPage:
'''
@:cur_page:当前页码
@:rouNum:数据总行数
@:perPage:每页显示的行数
@:displayPageNum:要显示的页码数
'''
def __init__(self,cur_page,rowNum,perPage,displayPageNum):
try:
self.cur_page = int(cur_page)
except(ValueError) as e:
self.cur_page = 1
self.rowNum = rowNum
self.perPage = perPage
self.displayPageNum = displayPageNum
self.pages = self.pageCount()
# 计算总共的页码数
def pageCount(self):
a,b = divmod(self.rowNum,self.perPage)
if b:
return a + 1
else:return a
def contentRange(self):
header = (self.cur_page - 1) * self.perPage
trail = self.cur_page * self.perPage
return (header,trail)
def pageRange(self):
half = int((self.displayPageNum - 1) / 2)
pageBegin = self.cur_page - half
pageEnd = self.cur_page + half + 1
if pageBegin <= 0:
pageBegin = 1
pageEnd = self.displayPageNum + 1
if pageEnd >= self.pages:
pageBegin = self.pages - self.displayPageNum
pageEnd = self.pages + 1
print(pageBegin,pageEnd)
return pageBegin,pageEnd
def webPage(self):
pageTag = []
# 获取要显示的页码范围
a,b = self.pageRange()
# 生成页码标签
for i in range(a,b):
tag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(i,i)
pageTag.append(tag)
prevPage = self.cur_page - 1
nextPage = self.cur_page + 1
if prevPage < 1:
prevPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(self.cur_page,"上一页")
else:prevPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(prevPage,"上一页")
if nextPage > self.pages:
nextPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(self.cur_page,"下一页")
else:nextPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(nextPage,"下一页")
pageTag.insert(0,prevPageTag)
pageTag.append(nextPageTag)
return ''.join(pageTag)
应用组件函数:
def privpage(request):
# for i in range(300):
# models.Classes.objects.create(class_name="class"+str(i))
# 当前要访问的页码
cur_page = request.GET.get("page")
# 获取数据库行数
allRownum = models.Classes.objects.all().count()
'''
设置每页显示10条数据
第一页的数据:0~10
第二页的数据:10~20
...
'''
curPageObj = SplitPage(cur_page,allRownum,10,7)
# 获取当前页的开始和结束
start = curPageObj.contentRange()[0]
end = curPageObj.contentRange()[1]
# 获取当前页需要显示的数据
class_list = models.Classes.objects.all()[start:end]
return render(request,'index.html',{"class_list":class_list,"pageObj":curPageObj})
页面支持组件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ORM单表操作</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<h1>ORM单表操作</h1>
<table border="1">
<thead>
<tr>
<th>#ID</th>
<th>班级名称</th>
</tr>
</thead>
<tbody>
{% for row in class_list %}
<tr>
<td>{{ row.cid }}</td>
<td>{{ row.class_name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
{# 让返回的字符串标签生效加“|safe”#}
{{ pageObj.webPage|safe }}
</ul>
</nav>
</div>
<a href="/add_class.html">添加班级</a>
</body>
</html>
效果展示: