zoukankan      html  css  js  c++  java
  • flask+bootstrap 页面查询、分页

    背景:

    根据条件查询,分页,结果展示

    如图:

    1.

     2.

    代码如下:

    html:

      1 <div class="container-fluid">
      2     <div class="row">
      3         <div class="col-lg-12">
      4 
      5             <div class="card">
      6                 <div class="card-body" style="height: 128px">
      7                     <form class="form-horizontal" method="get" action="test1">
      8 
      9                         <div class="form-group">
     10                             <label style="font-size:16px;float:left ;Width: 100px;margin-top:7px;">&nbsp;&nbsp;&nbsp;&nbsp;时间:&nbsp;&nbsp;</label>
     11                             <input class="form-control js-datetimepicker" style="Width: 180px;float:left ;"
     12                                    type="text" id="start_time"
     13                                    name="start_time" placeholder="请选择具体时间" data-side-by-side="false"
     14                                    value="{% if start_time %}{{ start_time }}{% endif %}"
     15                                    data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm"/>
     16                             <input class="form-control js-datetimepicker" style="Width: 180px;float:left ;"
     17                                    type="text"
     18                                    id="end_time"
     19                                    name="end_time" placeholder="请选择具体时间" data-side-by-side="false"
     20                                    value="{% if end_time %}{{ end_time }}{% endif %}"
     21                                    data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm"/>
     22 
     23                             <label style="font-size:16px;float:left ;Width: 100px;margin-top:7px;">&nbsp;&nbsp;&nbsp;&nbsp;输入框:&nbsp;&nbsp;</label>
     24                             <input class="form-control" style="font-size:16px;float:left ;Width: 100px;"
     25                                    type="text1" id="text1" name="text1" value="{% if text1 %}{{ text1 }}{% endif %}"
     26                                    maxlength=20 placeholder="输入内容">
     27 
     28 
     29                             <label style="font-size:16px;float:left ;Width: 65px;margin-top:6px;">&nbsp;&nbsp;&nbsp;&nbsp;结果:</label>
     30                             <div style="font-size:16px;float:left ;">
     31                                 <select class="form-control" id="result" name="result" size="1"
     32                                         style="float:left ;Width: 83px">
     33                                     <option value="ALL" {% if result == "ALL" %}selected="selected" {% endif %}>
     34                                         ALL
     35                                     </option>
     36                                     <option value="PASS" {% if result == "PASS" %}
     37                                             selected="selected" {% endif %}>PASS
     38                                     </option>
     39                                     <option value="FAIL" {% if result == "FAIL" %}
     40                                             selected="selected" {% endif %}>FAIL
     41                                     </option>
     42                                 </select>
     43                             </div>
     44 
     45                         </div>
     46 
     47                         <div class="form-group" style="float:right ;">
     48                             <button class="btn btn-primary" type="submit" style=""
     49                                     id='search'>查询
     50                             </button>
     51                         </div>
     52 
     53                     </form>
     54 
     55                 </div>
     56 
     57                 <div class="card-body">
     58 
     59                     <div class="table-responsive">
     60                         <table class="table table-bordered">
     61                             <thead>
     62                             <tr>
     63                                 <th>ID</th>
     64                                 <th>内容1</th>
     65                                 <th>内容2</th>
     66                                 <th>内容3</th>
     67                                 <th>内容3</th>
     68                                 <th>内容3</th>
     69                                 <th>时间</th>
     70                                 <th>明细</th>
     71                             </tr>
     72                             </thead>
     73                             <tbody>
     74                             {% for v in page_data %}
     75                                 <tr>
     76                                     <td>{{ v.id }}</td>
     77                                     <td>{{ v.test1 }}</td>
     78                                     <td>{{ v.test2 }}</td>
     79                                     <td>{% if v.result =='PASS' %}<font class="text-success">{% else %}
     80                                         <font class="text-pink">{% endif %}{{ v.result }}</font></td>
     81                                     <td>{{ v.test3 }}</td>
     82                                     <td>{% if v.test4 == None %}{{ '' }}{% else %}
     83                                         {{ v.test4 }}{% endif %}</td>
     84                                     <td>{{ v.datetime }}</td>
     85                                     <td>
     86                                         <div class="btn-group">
     87                                             <button type="button" class="btn btn-primary" data-toggle="modal"
     88                                                     id='cases-auto-detail' data-target="#exampleModal"
     89                                                     data-whatever={{ v.id }}>明细
     90                                             </button>
     91                                         </div>
     92                                     </td>
     93                                 </tr>
     94 
     95                             {% endfor %}
     96                             </tbody>
     97                         </table>
     98 
     99 
    100                     </div>
    101                 </div>
    102             </div>
    103         </div>
    104 
    105     </div>
    106     <ul class="pagination">
    107         {% set offset = (offset)|int %}
    108         {% set limit = (limit)|int %}
    109         {% set count = (count)|int %}
    110         {% set current_page = (offset/limit)|int + (1 if offset%limit else 0) %}
    111         {% set total_page = (count/limit)|int + (1 if count%limit else 0) %}
    112         <li class="{{ "disabled" if current_page - 1 <= 0 else "" }}">
    113             <a href="
    114                     {% if current_page>1 %}{{ url_for('test1', start_time=start_time,end_time=end_time,text1=text1, result=result,offset=(current_page-1)*limit, limit=limit) }}{% endif %}">&laquo;</a>
    115         </li>
    116 
    117         {% set prev = 0 %}
    118         {% for i in range(0, (total_page)|int) %}
    119             {% if (i-0)|abs < 2 or (i-total_page)|abs < 3 or -2 < i-current_page < 5 %}
    120                 {% set prev = i %}
    121                 <li class="{% if i == current_page %}active{% endif %}">
    122                     <a
    123                             href="{{ url_for('test1', start_time=start_time,end_time=end_time, text1=text1, result=result, offset=i*limit, limit=limit) }}">{{ i + 1 }}</a>
    124                 </li>
    125 
    126             {% elif prev == i-1 %}
    127                 <li class="disabled"><a></a></li>
    128 
    129             {% endif %}
    130         {% endfor %}
    131         <li class="{{ "disabled" if current_page + 1 >= total_page else "" }}">
    132             <a href="
    133                     {% if current_page + 1<total_page %}{{ url_for('test1', start_time=start_time,end_time=end_time, text1=text1, result=result, offset=(current_page + 1)*limit, limit=limit) }}{% endif %}">&raquo;</a>
    134         </li>
    135     </ul>
    136 
    137 </div>
    138 
    139 #js路径根据实际路径填写
    140    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    141     <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
    142     <script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
    143     <!--时间选择插件-->
    144     <script src="static/js/bootstrap-datetimepicker/moment.min.js"></script>
    145     <script src="static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
    146     <script src="static/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
    147     <!--日期选择插件-->
    148     <script src="static/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    149     <script src="static/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    150     <script type="text/javascript" src="static/js/main.min.js"></script>
    View Code

    后端(python-flask):

     1 @app.route('/test1',methods=['GET','POST'])
     2 def test1():
     3     start_time = request.args.get('start_time', "")
     4     end_time = request.args.get('end_time', "")
     5     text1= request.args.get("text1", '', str)
     6     result = request.args.get("result", 'ALL', str)
     7     offset = request.args.get('offset', 0, int)
     8     limit = request.args.get('limit', 20, int)
     9 
    10 
    11     # SQL 条件
    12     sql_text0 = '1=1'
    13     sql_text_date_start = ' ' if start_time == '' else ' and datetime >= "{timeStart}" '.format(timeStart=start_time)
    14     sql_text_date_end = ' ' if end_time == '' else ' and datetime <= "{timeEnd}" '.format(timeEnd=end_time)
    15     sql_text_result = ' ' if result == 'ALL'  else ' and result = "{result}"'.format(result=result)
    16     sql_text_text1 = ' ' if text1== '' else ' and text1 like "%%{text1}%%"'.format(text1=text1)
    17     sql_text = sql_text0 + sql_text_date_start + sql_text_date_end +  sql_text_result + sql_text_text1 
    18     # 建表对象
    19     table_name= TableName()
    20     # 查询数据
    21     res = table_name.query.filter(text(sql_text)).order_by(text("id desc")).limit(limit).offset(offset).all()
    22     # 查询总数
    23     count = table_name.query.filter(text(sql_text)).count()
    24 
    25     return render_template("test/test.html",page_data=res,
    26                            start_time=start_time,end_time=end_time,  text1=text1,offset=offset, result=result, limit=limit,count=count)
    View Code
  • 相关阅读:
    0019. Remove Nth Node From End of List (M)
    0018. 4Sum (M)
    0278. First Bad Version (E)
    0273. Integer to English Words (H)
    0017. Letter Combinations of a Phone Number (M)
    0016. 3Sum Closest (M)
    0015. 3Sum (M)
    软件测试常见面试题
    如何快速掌握DDT数据驱动测试?
    selenium--三种等待方式
  • 原文地址:https://www.cnblogs.com/whycai/p/12283701.html
Copyright © 2011-2022 走看看