Flask实现分页显示数据

傷城~ 2023-01-19 14:55 15阅读 0赞

Flask实现分页显示数据

效果图

在做网页的时候，通常会展示很多数据，如果把全部数据放在一页显示的话，会让浏览器加载变得更慢，所以通常在展示很多数据的时候进行分页显示，让浏览器进行片段式加载。先上一个效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70][]

步骤

首先是路由(views.py):设计思路是根据查询的页码作为参数，利用FlaskSQLAlchemy的Model进行查询并对查询结果进行分页处理。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> @admin.route("/course/list/&lt;int:page&gt;/", methods=["GET"]) def courses_list(page=None): &nbsp;&nbsp;&nbsp; if page is None:#如果没有page则显示第一页 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; page = 1 &nbsp;&nbsp;&nbsp; page_data = T_courses.query.order_by( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; T_courses.cno.asc()#按照课程号正序排列 ).paginate(page=page, per_page=10) #paginate方法返回一个sqlalchemy.Pagination类型对象 &nbsp;&nbsp;&nbsp; return render_template("admin/courses_list.html", page_data=page_data) </td> 
 </tr> 
 </tbody> 
</table>

page\_data是一个FlaskSQLAlchemy中的Pagination类型对象一个Query对象调用paginate方法就获得了Pagination对象。paginate方法传入了两个参数，一个是当前页，另一个是每一页最多显示多少数据。paginate的返回值为代表当前页的Pagination对象。

**一个Paginationi对象的常用属性有：**

1.  items 当前页面中的所有记录(比如当前页上有5条记录，items就是以列表形式组织这5个记录)
2.  query 当前页的query对象(通过query对象调用paginate方法获得的Pagination对象)
3.  page 当前页码(比如当前页是第5页，返回5)
4.  prev\_num 上一页页码
5.  next\_num 下一页页码
6.  has\_next 是否有下一页 True/False
7.  has\_prev 是否有上一页 True/False
8.  pages 查询得到的总页数 per\_page 每页显示的记录条数
9.  total 总的记录条数

**常用方法有：**

1.  prev() 上一页的分页对象Pagination
2.  next() 下一页的分页对象Pagination
3.  iter\_pages(left\_edge=2,left\_current=2,right\_current=5,right\_edge=2)
4.  iter\_pages 用来获得针对当前页的应显示的分页页码列表。

假设当前共有100页，当前页为50页，按照默认的参数设置调用iter\_pages获得的列表为：

\[1,2,None,48,49,50,51,52,53,54,55,None,99,100\]

接下来是模板，一个是显示课程的页面(courses\_list.html)，一个是分页页面(admin\_page.html)

<table style="margin-left:24pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> {% import "ul/admin_page.html" as pg %} {% for v in page_data.items %} &lt;tr&gt; &lt;td&gt;{ {v.cno}}&lt;/td&gt; &lt;td&gt;{ {v.cname}}&lt;/td&gt; &lt;td&gt;{ {v.credit}}&lt;/td&gt; &lt;td&gt;{ {v.hour}}&lt;/td&gt; &lt;td&gt;{ {v.theory_hour}}&lt;/td&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;{ {v.practice_hour}}&lt;/td&gt; &lt;td&gt;{ {v.year}}&lt;/td&gt; &lt;td&gt;{ {v.term}}&lt;/td&gt; &lt;td&gt;{ {v.methods}}&lt;/td&gt; &lt;/tr&gt; {% endfor %} { { pg.page(page_data,'admin.courses_list') }} </td> 
 </tr> 
 </tbody> 
</table>

这段代码首先是导入了admin\_page.html，然后使用for循环对views.py查询到的内容进行遍历，接着向分页模板页面传入了两个值。

接下来是分页模板页面页面：

<table style="margin-left:24pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> {% macro page(data,url) %} {% if data %} &lt;ul class="pagination pagination-sm no-margin pull-right"&gt; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=1) }}"&gt;首页&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% if data.has_prev %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=data.prev_num) }}"&gt;上一页&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% else %} &nbsp;&nbsp;&nbsp; &lt;li class="disabled"&gt;&lt;a href="#"&gt;上一页&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% endif %} &nbsp;&nbsp;&nbsp; {% if data.pages&gt;5%} &nbsp;&nbsp;&nbsp; {% if data.page &lt;4 %} &nbsp;&nbsp;&nbsp; {% for i in range(1,4) %} &nbsp;&nbsp;&nbsp; {% if i == data.page %} &nbsp;&nbsp;&nbsp; &lt;li class="active"&gt;&lt;a href="#"&gt;{ { i }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% else %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=i) }}"&gt;{ { i }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {%endif%} &nbsp;&nbsp;&nbsp; {% endfor %} &nbsp;&nbsp;&nbsp; {%elif (data.pages-data.page)&lt;3%} &nbsp;&nbsp;&nbsp; {% for i in range(data.pages-3,data.pages+1) %} &nbsp;&nbsp;&nbsp; {% if i == data.page %} &nbsp;&nbsp;&nbsp; &lt;li class="active"&gt;&lt;a href="#"&gt;{ { i }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% else %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=i) }}"&gt;{ { i }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {%endif%} &nbsp;&nbsp;&nbsp; {% endfor %} &nbsp;&nbsp;&nbsp; {%else%} &nbsp;&nbsp;&nbsp; {% for i in range(data.page-3,data.page+4) %} &nbsp;&nbsp;&nbsp; {% if i == data.page %} &nbsp;&nbsp;&nbsp; &lt;li class="active"&gt;&lt;a href="#"&gt;{ { i }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% else %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=i) }}"&gt;{ { i }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {%endif%} &nbsp;&nbsp;&nbsp; {% endfor %} &nbsp;&nbsp;&nbsp; {%endif%} &nbsp;&nbsp;&nbsp; {%else%} &nbsp;&nbsp;&nbsp; {% for v in data.iter_pages()%} &nbsp;&nbsp;&nbsp; {% if v == data.page %} &nbsp;&nbsp;&nbsp; &lt;li class="active"&gt;&lt;a href="#"&gt;{ { v }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% else %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=v) }}"&gt;{ { v }}&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% endif%} &nbsp;&nbsp;&nbsp; {% endfor %} &nbsp;&nbsp;&nbsp; {% endif%} &nbsp;&nbsp;&nbsp; {% if data.has_next %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=data.next_num) }}"&gt;下一页&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% else %} &nbsp;&nbsp;&nbsp; &lt;li class="disabled"&gt;&lt;a href="#"&gt;下一页&lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp; {% endif %} &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="{ { url_for(url,page=data.pages) }}"&gt;尾页{ {data.pages}}&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; {% endif %} {% endmacro&nbsp; %} </td> 
 </tr> 
 </tbody> 
</table>

这段代码整体来说是根据当前页对上一页、页码、下一页进行不同的设置，利用了利用JinJa2的if语句。

1、判断当前页码，只显示当前页码上下三页的选项，如果直接将左右页码展示出来，数据太多会直接报错。

2、判断是否还有前一页和后一页，如果为有才能点击上一页和下一页，否则不能点击。

3、判断页码中是否为当前页，将本页的页码显示为高亮，让用户判断当前页是第几页。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70]: /images/20221021/c99a1590a5854127b51d55e6986dc1cf.png