zoukankan      html  css  js  c++  java
  • 17flask分页

    一,flask_sqlachemy的使用

      如果想要展示出来的页面是分页显示,则首先需要知道每页应该分多少个条目,然后通过数据库去查找对应的条数,同时也需要和分页所需的“paginate”结合使用。

      先贴代码:  

     1 @app.route('/')
     2 def index():
     3     # 原始代码
     4     # context = {
     5     #     'questions':Question.query.order_by('create_time').all()   #注意all()
     6     # }
     7     # # print(context)
     8     # return render_template('index.html',**context)   #**的使用
     9     # print(request.args.get('page'))
    10 
    11     #分页代码
    12     # print(request.args.get('page',1))
    13     page = int(request.args.get('page', 1))
    14     per_page = int(request.args.get('per_page', 3))
    15     # 上面两行别丢了,不能用下面的下,不然不能知道当前页了。
    16     #page = 1
    17     #per_page = 3
    18 
    19     paginate = Question.query.order_by(db.desc(Question.create_time)).paginate(page, per_page, error_out=False)
    20     #这行代码首先根据“db.desc(Question.create_time)“按照创建时间拍个序号,
    21     #然后“.paginate(page, per_page, error_out=False)”就成,没啥特殊操作。
    22     questions = paginate.items
    23     # 将项目与paginate对应
    24 
    25     question_max_id = Question.query.order_by(db.desc(Question.id)).first().id
    26 
    27     context = {
    28         'paginate': paginate,
    29         'questions': questions,
    30         'question_max_id': question_max_id
    31         #这里我加入了一个最大序号,是为了将最新的条目加“new”标记。
    32     }
    33 
    34     return render_template('index.html', **context)  # **的使用。

      原始代码是没有分页的情况。

      先看看分页代码中的paginate的用法:

      paginate(page, per_page, error_out=True)
      page 当前页数
      per_page 每页显示的条数
      error_out 是否打印错误信息,Flase表页码超出后返回空,否则返回404.

    二,jinja2显示

      先贴代码

      1 {% extends 'base.html' %}
      2 {% block title %}首页{% endblock %}
      3 
      4 {% block head %}
      5     <meta charset="UTF-8">
      6     <link rel="stylesheet" href="{{ url_for('static',filename = "css/index.css") }}">
      7 {% endblock %}
      8 
      9 {% block main %}
     10         <ul>
     11         {% for question in questions %}
     12 
     13             <li>
     14                 <div class="question-list-group">
     15                     <img src="{{ url_for('static',filename = "images/dajun1.png")}}" alt="" class="avatar">
     16                 </div>
     17 
     18                 <div class="question-group">
     19 
     20                     <p class="question-title">
     21 {#                    <a href="{{ url_for('detail',question_id = question.id) }}">{{ question.title }}</a>#}
     22 {#    如果当前的问题id大于==id,则给它一个new标签,否则就按照常规输出#}
     23                         {% if question.id ==  question_max_id   %}
     24 {#                            <h6>{{ question.title }} <span class="label label-default">New</span></h6>#}
     25                             <a href="{{ url_for('detail',question_id = question.id) }}">{{ question.title }}</a> <span class="label label-default">New</span>
     26                         {% else %}
     27                             <a href="{{ url_for('detail',question_id = question.id) }}">{{ question.title }}</a>
     28                         {% endif %}
     29 
     30 {#                        #这里注意下带其他参数的question_id的用法#}
     31                     </p>
     32 
     33                     <p class="question-content" >
     34 {#                        这里的使得把形如“<p>&nbsp; &nbsp;打撒</p><p>&nbsp;</p>”这样的文本按照样式显示出来。#}
     35                         {{ question.content|safe }}
     36                     </p>
     37 
     38                     <div class="question-info">
     39                         <span class="question-author">
     40                             <a href="{{ url_for('other_user_info',anwser_name =question.author.username) }}">{{ question.author.username }}</a>
     41                         </span>
     42 
     43                         <span class="question-time">
     44                             {{ question.create_time }}
     45                         </span>
     46                     </div>
     47 
     48                 </div>
     49             </li>
     50 
     51         {% endfor %}
     52 
     53 {#    当前页数:{{ paginate.page }}#}
     54 {#    总页数:{{ paginate.pages }}#}
     55 {#    一共有{{ paginate.total }}条数据#}
     56 {#    <br>#}
     57 
     58 {#    {% if paginate.has_prev %}#}
     59 {#        <a href="?page={{ paginate.prev_num }}">上一页</a>#}
     60 {#    {% endif %}#}
     61 {#    页码:#}
     62 {##}
     63 {#    {% for i in paginate.iter_pages() %}#}
     64 {#        <a href="?page={{ i }}">{{ i }}</a>#}
     65 {#    {% endfor %}#}
     66 {##}
     67 {#    {% if paginate.has_next %}#}
     68 {#        <a href="?page={{ paginate.next_num }}">下一页</a>#}
     69 {#    {% endif %}#}
     70 {#    </ul>#}
     71 
     72 
     73 {#下面是只有前后页的情况#}
     74 {#<nav aria-label="...">#}
     75 {#  <ul class="pager">#}
     76 {#  <li class="previous"><a href="?page={{ paginate.prev_num }}"><span aria-hidden="true">&larr;</span> 上一页</a></li>#}
     77 {#      {% if paginate.page ==1 %}#}
     78 {#               <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>#}
     79 {#      {% else %}#}
     80 {#            <li class="previous"><a href="?page={{ paginate.prev_num }}"><span aria-hidden="true">&larr;</span> 上一页</a></li>#}
     81 {#      {% endif %}#}
     82 {#      {% if paginate.page >= paginate.pages %}#}
     83 {#           <li class="next"><a href=#">下一页 <span aria-hidden="true">&rarr;</span></a></li>#}
     84 {#      {% else %}#}
     85 {#          <li class="next"><a href="?page={{ paginate.next_num }}">下一页 <span aria-hidden="true">&rarr;</span></a></li>#}
     86 {#      {% endif %}#}
     87 {#  </ul>#}
     88 {#</nav>#}
     89 
     90 {#下面是直接点每一页  加  前后页的情况#}
     91 <nav aria-label="...">
     92   <ul class="pagination">
     93 {#  当前页面为第一页,则把前翻disable#}
     94         {% if paginate.page == 1 %}
     95             <li class="disable">
     96                   <span>
     97                         <span aria-hidden="true">&laquo;</span>
     98                   </span>
     99              </li>
    100         {% else %}
    101             <li class="active">
    102                   <span>
    103                         <span aria-hidden="true">&laquo;</span>
    104                   </span>
    105              </li>
    106         {% endif %}
    107 
    108 {#要用“paginate.iter_pages()”,这里不能用“paginate.pages”(总页数),不然会返回“TypeError: 'int' object is not iterable”#}
    109           {% for i in  paginate.iter_pages() %}
    110                 <li class="active">
    111                      <a href="?page={{ i }}">{{ i }}</a>
    112                 </li>
    113           {% endfor %}
    114 
    115 {#  当前页面为最后一页,则把前翻disable#}
    116         {% if paginate.page == paginate.pages %}
    117             <li class="disable">
    118                   <span>
    119                         <span aria-hidden="true">&raquo;</span>
    120                   </span>
    121              </li>
    122         {% else %}
    123             <li class="active">
    124                   <span>
    125                         <span aria-hidden="true">&raquo;</span>
    126                   </span>
    127              </li>
    128         {% endif %}
    129 
    130   </ul>
    131 
    132 </nav>
    133 
    134         <span class="label label-success"> 当前页数:{{ paginate.page }}</span>
    135         <span class="label label-warning">总页数:{{ paginate.pages }}</span>
    136         <span class="label label-danger">一共有{{ paginate.total }}条数据</span>
    137 {#{{ (paginate.page /paginate.pages)*100}}#}
    138         <br>
    139 <div class="progress">
    140   <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" {{ (paginate.page /paginate.pages)*100}}%">
    141     <span class="sr-only">45% Complete</span>
    142   </div>
    143 </div>
    144 
    145 {#    总页数:{{ paginate.pages }}#}
    146 {#    一共有{{ paginate.total }}条数据#}
    147 
    148 
    149 {% endblock %}

    行1:引用模板。
    行9--行149是block块。
    行10--51显示一中的行29内的内容。
    行22--28,把最新的条目加“new”标记。
    行73的代码能用,是只有前页和后页的情况。
    行93--106当前页面为1,则前翻disable。行116同。
    注意:行109中是“for i in paginate.iter_pages()”而非“paginate.pages”,不然会显示“TypeError: 'int' object is not iterable”。

    行140是翻页进度条,这是据下载条改的,bootstrap都有。

  • 相关阅读:
    编译安装Apache+PHP
    I/O模型之Web应用服务
    IO模型及Nginx架构流程概述
    nginx架构模型分析
    操作系统核心原理-4.线程原理(下):死锁基础原理
    操作系统核心原理-4.线程原理(上):线程基础与线程同步
    操作系统-进程概念
    socket与异步—异步(php版)
    socket与异步—socket(php版)
    mysql之一:系统准备及安装
  • 原文地址:https://www.cnblogs.com/two-peanuts/p/11219637.html
Copyright © 2011-2022 走看看