tornado实现分页

一.功能逻辑

页面样式:tornado实现分页

 功能:

  • 每页显示5条数据,后端有一个列表LIST_INFO保存着每一条数据
  • 点击首页,跳转到表格第一页,同时页码1高亮
  • 点击上一页,跳转到表格当前页的上一页,同时高亮页码切换到上一页,当当前页为第1页时,点击上一页后还显示第一页
  • 点击页码数,跳转到相应页,并且保持总是显示9个页码数,当前页码为1-5时,显示前面页码1-9;当前页码为最后五页时,显示页码为最后9页,当前页码为其他时,显示当前页码和前后各4个页码。
  • 点击尾页,跳转到表格最后一页,同时最后一页页码高亮,当当前页为最后一页时,点击尾页无效
  • 在右侧输入框中,输入页码数,点击go,则跳转到相应页。

二.目录结构:

tornado实现分页

三.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)