背景：
根据条件查询，分页，结果展示
如图：
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>
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
