效果图
在做网页的时候，通常会展示很多数据，如果把全部数据放在一页显示的话，会让浏览器加载变得更慢，所以通常在展示很多数据的时候进行分页显示，让浏览器进行片段式加载。先上一个效果图：
@admin.route("/course/list/<int:page>/", methods=["GET"])def courses_list(page=None): if page is None:#如果没有page则显示第一页 page = 1 page_data = T_courses.query.order_by( T_courses.cno.asc()#按照课程号正序排列).paginate(page=page, per_page=10)#paginate方法返回一个sqlalchemy.Pagination类型对象 return render_template("admin/courses_list.html", page_data=page_data)
page_data是一个FlaskSQLAlchemy中的Pagination类型对象一个Query对象调用paginate方法就获得了Pagination对象。paginate方法传入了两个参数，一个是当前页，另一个是每一页最多显示多少数据。paginate的返回值为代表当前页的Pagination对象。
一个Paginationi对象的常用属性有：
items 当前页面中的所有记录(比如当前页上有5条记录，items就是以列表形式组织这5个记录)
query 当前页的query对象(通过query对象调用paginate方法获得的Pagination对象)
page 当前页码(比如当前页是第5页，返回5)
prev_num 上一页页码
next_num 下一页页码
has_next 是否有下一页 True/False
has_prev 是否有上一页 True/False
pages 查询得到的总页数 per_page 每页显示的记录条数
total 总的记录条数
常用方法有：
prev() 上一页的分页对象Pagination
next() 下一页的分页对象Pagination
iter_pages(left_edge=2,left_current=2,right_current=5,right_edge=2)
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)
|
{% import "ul/admin_page.html" as pg %} {% for v in page_data.items %} <tr> <td>{{v.cno}}</td> <td>{{v.cname}}</td> <td>{{v.credit}}</td> <td>{{v.hour}}</td> <td>{{v.theory_hour}}</td> <td>{{v.practice_hour}}</td> <td>{{v.year}}</td> <td>{{v.term}}</td> <td>{{v.methods}}</td> </tr> {% endfor %} {{ pg.page(page_data,'admin.courses_list') }}
|
这段代码首先是导入了admin_page.html，然后使用for循环对views.py查询到的内容进行遍历，接着向分页模板页面传入了两个值。
接下来是分页模板页面页面：
|
{% macro page(data,url) %} {% if data %} <ul class="pagination pagination-sm no-margin pull-right"> <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3D1%29+%7D%7D">首页</a></li> {% if data.has_prev %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Ddata.prev_num%29+%7D%7D">上一页</a></li> {% else %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%23">上一页</a></li> {% endif %} {% if data.pages>5%} {% if data.page <4 %} {% for i in range(1,4) %} {% if i == data.page %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%23">{{ i }}</a></li> {% else %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Di%29+%7D%7D">{{ i }}</a></li> {%endif%} {% endfor %} {%elif (data.pages-data.page)<3%} {% for i in range(data.pages-3,data.pages+1) %} {% if i == data.page %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%23">{{ i }}</a></li> {% else %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Di%29+%7D%7D">{{ i }}</a></li> {%endif%} {% endfor %} {%else%} {% for i in range(data.page-3,data.page+4) %} {% if i == data.page %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%23">{{ i }}</a></li> {% else %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Di%29+%7D%7D">{{ i }}</a></li> {%endif%} {% endfor %} {%endif%} {%else%} {% for v in data.iter_pages()%} {% if v == data.page %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%23">{{ v }}</a></li> {% else %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Dv%29+%7D%7D">{{ v }}</a></li> {% endif%} {% endfor %} {% endif%} {% if data.has_next %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Ddata.next_num%29+%7D%7D">下一页</a></li> {% else %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%23">下一页</a></li> {% endif %} <li><a href="https://www.ctyun.cn/portal/link.html?target=%7B%7B+url_for%28url%2Cpage%3Ddata.pages%29+%7D%7D">尾页{{data.pages}}</a></li> </ul> {% endif %} {% endmacro %}
|
这段代码整体来说是根据当前页对上一页、页码、下一页进行不同的设置，利用了利用JinJa2的if语句。
1、判断当前页码，只显示当前页码上下三页的选项，如果直接将左右页码展示出来，数据太多会直接报错。
2、判断是否还有前一页和后一页，如果没有才能点击上一页和下一页，否则不能点击。
3、判断页码中是否为当前页，将本页的页码显示为高亮，让用户判断当前页是第几页。
END