tornado实现分页

女爷i 2022-01-28 23:47 517阅读 0赞

# 一.功能逻辑 #

### 页面样式：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70][] ###

###  功能： ###

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

# 二.目录结构： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70 1][]

# 三.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': 'adwrcqfnfqfpwfwabc@163.com', 'gender': '男', 'id': '1', 'age': 18}
    ]
    for i in range(99):
        LIST_INFO.append(
            {'username': 'lincoco', 'email': 'adwrcqfnfqfpwfwabc@163.com', '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)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70]: /images/20220129/fbfbf560227248ec8e2d2cba80b30e6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70 1]: /images/20220129/3639097e0dbf4cbba0bf0a796ad6a0e6.png