Flask使用paginate进行翻页_flask paginate

作者：Cpp五条 | 2024-06-07 16:08:20

踩

flask paginate

Flask可以将数据库的表展示到网页上，如果数据过多，就需要借助flask中的paginate来对数据进行翻页操作，只需要两个操作就可实现数据的翻页

1.app.py


#将MySQL的数据以表格的形式展示到网页
@app.route('/admin/')
def manager():
    page = int(request.args.get('page', 1))
    per_page = int(request.args.get('per_page', 10))
    paginate = Person.query.paginate(page=page, per_page=per_page, error_out=False)
    pagedata = paginate.items
    titles = ['序号', '用户名','电脑系统名', '年龄', '性别', '电话号码', '喜欢景点类型', '搜索景点类型', '搜索景点名称', '搜索景点评分', '账号创建时间']
    return render_template('manager.html',paginate=paginate, pagedata=pagedata,titles=titles)

Person为数据库的表的模式

2.manager.html


<!DOCTYPE html>
{% extends 'base_main.html' %}
{% block content %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游推荐系统!</title>
    <style>
          ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-left:-5px;
            width: 70px;
            height: 50px;
            background-color: #deffff;
            color:white;
          }
          li::before {
            content: "";
            display: block;
            padding-top: 20%;
            background-color: #deffff;
          }
          body {
              background-image: url("https://img.zcool.cn/community/01d6d05c245575a8012029ac04c993.jpg@2o.jpg");
              filter: brightness(100%);
              background-repeat: no-repeat;
              background-size: cover;
              opacity: 0.7;
            }
          a.reset-style {
              background-color: initial;
            }
          input {
              width: 150px;
              height: 25px;
           }
        </style>
</head>
<body >
    <div >
        <div style="text-align:center"><h2>flask使用paginate翻页</h2></div>
        <table border="1" align="center" style="background-color: #ffffff;font-family:'楷体', sans-serif;text-align:center"  >
            <thead>
                <tr>
                    {% for i in titles %}
                        <td>{{ i }}</td>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for data in pagedata %}
                    <tr>
                        <td style="width:45px;">{{ loop.index0 }}</td>
                        <td style="width:100px;">{{ data.username }}</td>
                        <td style="width:100px;">{{ data.system_name }}</td>
                        <td style="width:50px;">{{ data.age }}</td>
                        <td style="width:50px;">{{ data.sex }}</td>
                        <td style="width:100px;">{{ data.phone_number }}</td>
                        <td style="width:100px;">{{ data.types }}</td>
                        <td style="width:200px;">{{ data.search_type }}</td>
                        <td style="width:100px;">{{ data.search_name }}</td>
                        <td style="width:100px;">{{ data.search_score }}</td>
                        <td style="width:100px;">{{ data.time }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div>
            <ul style="text-align: center;">
                {% if paginate.has_prev %}
                    <li style="display: inline-block;"><a href="/index/?page={{ paginate.prev_num }}">上一页</a></li>
                {% endif %}
                {% for i in paginate.iter_pages() %}
                    {% if i == None %}
                        <li style="display: inline-block;"><a >...</a></li>
                    {% else %}
                        <li style="display: inline-block;"><a href="/index/?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if paginate.has_next %}
                    <li style="display: inline-block;"><a href="/index/?page={{ paginate.next_num }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
        <div style="font-size: 12px; text-align: center; margin-top: 20px;margin-bottom: 10px;">
            当前页数：{{ paginate.page }}
            总页数：{{ paginate.pages }}
            一共有{{ paginate.total }}条数据
        </div>
    </div>
</body>
{% endblock %}
</html>

base_main.html的代码如下：


<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
        a {
            padding: 10px;
            color:black;
            text-decoration: none;
            marge-left:15px
        }
        a:hover {
            background-color: #FFFFFF; /* 更换背景色为红色 */
        }
        body {
              background-image: url("http://www.wlkst.com/u/cms/www/202006/17104548tne0.jpg");
              background-repeat: no-repeat;
              background-size: cover;
              opacity: 0.4;
              font-family:"微软雅黑", 'Arial', sans-serif;
            }
        body, html {
              margin: 0;
              padding: 0;
              width: 100%;
              height: 100%;
            }
 
    </style>
</head>
<body>
  <nav style="background-color: #f1f1f1; padding: 10px;wigth:100%">
    <a href="/" style=" " >登录</a>
    <a href="/regist">注册</a>
  </nav>
  {% block content %}{% endblock %}
</body>
</html>

其中nav是给网页底部加导航栏，若不需要，可删除

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/686079