tornado实现分页
一.功能逻辑
页面样式:
功能:
- 每页显示5条数据,后端有一个列表LIST_INFO保存着每一条数据
- 点击首页,跳转到表格第一页,同时页码1高亮
- 点击上一页,跳转到表格当前页的上一页,同时高亮页码切换到上一页,当当前页为第1页时,点击上一页后还显示第一页
- 点击页码数,跳转到相应页,并且保持总是显示9个页码数,当前页码为1-5时,显示前面页码1-9;当前页码为最后五页时,显示页码为最后9页,当前页码为其他时,显示当前页码和前后各4个页码。
- 点击尾页,跳转到表格最后一页,同时最后一页页码高亮,当当前页为最后一页时,点击尾页无效
- 在右侧输入框中,输入页码数,点击go,则跳转到相应页。
二.目录结构:
三.HTML-home.html
代码块中的{% raw str_page %}为模板语言,根据后端传入【页码相关的html代码块】
index.html放在views文件夹下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page_num a{
display:inline-block;
padding:5px;
margin:3px;
background-color:gray;
}
.page_num a.active{
background-color:pink;
color:black;
}
</style>
</head>
<body>
<h1>显示数据</h1>
<table border="1px">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>性别</th>
<th>学号</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
{% for item in list_info%}
<tr>
<td>{{item['username']}}</td>
<td>{{item['email']}}</td>
<td>{{item['gender']}}</td>
<td>{{item['id']}}</td>
<td>{{item['age']}}</td>
</tr>
{% end %}
</tbody>
</table>
<div class="page_num">
{% raw str_page %}
</div>
</body>
</html>
四.后端主程序-starts.py
当url为/index/页码数时,转向home.IndexHandler类中的get方法
#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.web
import tornado.ioloop
from demo1.controllers import home
settings = {
'template_path': 'views', # 模板路径的配置
'static_path': 'statics', # 静态文件
}
# 路由映射,路由系统
application = tornado.web.Application([
(r'/index/(?P<page>\d*)', home.IndexHandler),
], **settings)
if __name__ == "__main__":
application.listen(9999)
tornado.ioloop.IOLoop.instance().start()
五.后端分页处理 home.IndexHandler类-home.py
#!/usr/bin/env python
# -*- coding:utf-8 -*-
import tornado.web
# 显示数据列表
LIST_INFO = [
{'username': 'lincoco', 'email': '[email protected]', 'gender': '男', 'id': '1', 'age': 18}
]
for i in range(99):
LIST_INFO.append(
{'username': 'lincoco', 'email': '[email protected]', 'gender': '男', 'id': str(i), 'age': 18})
class Pagination:
"""
分页
"""
def __init__(self, current_page='1', page_item=1):
all_page, c = divmod(page_item, 5)
if c > 0:
all_page += 1
try:
current_page = int(current_page)
except:
current_page = 1
if current_page < 1:
current_page = 1
self.current_page = current_page # 当前页
self.all_page = all_page # 总页数
@property
def start(self):
"""
显示数据的起点索引
:return:
"""
return (self.current_page - 1) * 5
@property
def end(self):
"""
显示数据的末尾索引
:return:
"""
return self.current_page * 5
def page_num_show(self, baseurl):
"""
写入{% raw str_page %}模板中的内容
:param baseurl: 该段代码不仅可以在/index/中使用,也可以在/home/等等页码使用,
:return: 返回一段字符串形式的html代码块,包括首页,页码数,上一页等等内容
"""
# 计算9个页码的起始索引
list_page = []
if self.current_page <= 4:
s = 0
e = min(self.all_page, 9)
elif self.current_page > self.all_page - 4:
s = max(0, self.all_page - 9)
e = self.all_page
else:
s = self.current_page - 5
e = self.current_page + 4
# 首页
first_page = '<a href="%s1">首页</a>' % (baseurl)
list_page.append(first_page)
# 上一页current_page-1
if self.current_page <= 1:
prev_page = '<a href="javascript:void(0);">上一页</a>'
else:
prev_page = '<a href="%s%s">上一页</a>' % (baseurl, self.current_page - 1)
list_page.append(prev_page)
#9个页码数
for p in range(s, e):
if p + 1 == self.current_page:
temp = '<a href="%s%s" class="active">%s</a>' % (baseurl, p + 1, p + 1)
list_page.append(temp)
else:
temp = '<a href="%s%s">%s</a>' % (baseurl, p + 1, p + 1)
list_page.append(temp)
# 下一页next_page+1
if self.current_page >= self.all_page:
next_page = '<a href="javascript:void(0);">下一页</a>'
else:
next_page = '<a href="%s%s">下一页</a>' % (baseurl, self.current_page + 1)
list_page.append(next_page)
# 尾页
last_page = '<a href="%s%s">尾页</a>' % (baseurl, self.all_page)
list_page.append(last_page)
# 页面跳转
jump = """<input type="text"/><a onclick="Jump('%s',this);">go</a>""" % (baseurl,)
script = """<script>
function Jump(url,self){
var v=self.previousElementSibling.value;
if (v.trim().length>0){
location.href=url+v;
}
}
</script>"""
list_page.append(jump)
list_page.append(script)
str_page = "".join(list_page)
return str_page
class IndexHandler(tornado.web.RequestHandler):
def get(self, page):
page_obj = Pagination(page, len(LIST_INFO))
# 当前页显示的数据
current_list = LIST_INFO[page_obj.start:page_obj.end]
# 当前页显示的页码数相关html代码
str_page = page_obj.page_num_show('/index/')
self.render('home/index.html', list_info=current_list, current_page=page_obj.current_page, str_page=str_page)