背景：
根据条件查询，分页，结果展示
如图：
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;"> 时间: </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;"> 输入框: </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;"> 结果:</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 %}">«</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 %}">»</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>
后端（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)