在做网页的过程中，随着展示的数据增多，如果要在一页中显示全部内容，浏览速度会变慢且不符合实际需求。在 Web 浏览器中， 内容多的网页需要花费更多的时间生成、下载和渲染， 所以网页内容变多会降低用户体验的质量。这一问题的解决方法是分页 显示数据，进行片段式渲染。
flask进行分页显示数据提供了两种方法，一种是Flask-SQLAlchemy 的Pagination对象，一种是flask_paginate包，其实两者是高度一致的，flask_paginate是直接将Pagination和BootStrap做了绑定，但其实效果不是很好，估计是CSS之间有冲突。
其他方法则是自己定制代码实现分页。
paginate() 方法的返回值是一个 Pagination 类对象，这个类在 Flask-SQLAlchemy 中定义。这个对象包含很多属性， 用于在模板中生成分页链接，因此将其作为参数传入了模板。
代码语言：javascript复制@app.route('/index/')
def indexv5():
page = int(request.args.get('page', 1))
per_page = int(request.args.get('per_page', 5))
paginate = BookInfo.query.order_by('isbnno').paginate(page, per_page, error_out=False)
pagedata = paginate.items
return render_template('indexv5.html',paginate=paginate, pagedata=pagedata)html页面代码如下：
代码语言：javascript复制{% extends 'base.html' %}
{% block content %}
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><center><h2>Flask 图书馆图书列表</h2></center></div>
<div class="panel-body">
<!--p>Flask 图书馆图书列表子标题</p-->
</div>
<table class="table table-striped" style="color: black">
<!--caption><center><h2>Flask 图书馆图书列表</h2></center></caption-->
<thead>
</thead>
<tbody>
{% for book in pagedata %}
<tr>
<td>{{ book.isbnno }}</th>
<td>{{ book.bookname }}</td>
<td>{{ book.publisher }}</td>
<td>{{ book.publicationdate }}</td>
<td>{{ book.booktype }}</td>
<td>{{ book.stockdate }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div>
<center>
当前页数：{{ paginate.page }}
总页数：{{ paginate.pages }}
一共有{{ paginate.total }}条数据
<ul class="pagination pagination-lg">
{% if paginate.has_prev %}
<li><a href="/index/?page={{ paginate.prev_num }}">上一页</a></li>
{% endif %}
{% for i in paginate.iter_pages() %}
<li><a href="/index/?page={{ i }}">{{ i }}</a></li>
{% endfor %}
{% if paginate.has_next %}
<li><a href="/index/?page={{ paginate.next_num }}">下一页</a></li>
{% endif %}
</ul>
</center>
</div>
{% endblock %}
最后展示效果：
flask_paginate也可以直接使用，代码就不做详细解读了
代码语言：javascript复制from flask_paginate import Pagination, get_page_parameter
PER_PAGE =5
@app.route('/index/')
def index():
search = False
q = request.args.get('q')
if q:
search = True
page = request.args.get(get_page_parameter(), type=int, default=1)
start = (page - 1) * PER_PAGE
end = start PER_PAGE
total = BookInfo.query.order_by('isbnno').count()
books = BookInfo.query.order_by('isbnno').slice(start, end)
pagination = Pagination(page=page, per_page=PER_PAGE,total=total, search=search, record_name='books')
return render_template('indexv6.html',
books=books,
pagination=pagination,
)相关页面代码如下，要比上面简洁一些。
代码语言：javascript复制{% extends 'base.html' %}
{% block content %}
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>序号</th>
<th>ISBNNO</th>
<th>书籍名称</th>
<th>出版社</th>
<th>出版时间</th>
<th>文献类型</th>
<th>入库时间</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>{{ loop.index pagination.skip }}</td>
<td>{{ book.isbnno }}</td>
<td>{{ book.bookname }}</td>
<td>{{ book.publisher }}</td>
<td>{{ book.publicationdate }}</td>
<td>{{ book.booktype }}</td>
<td>{{ book.stockdate }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{{ pagination.links }}
{% endblock %}
运行后输出的静态html页面，很明显直接输出了bootstrap的标签，引用的bootstrap样式。
代码语言：javascript复制<div class="pagination">
<ul>
<li class="previous"><a href="/index/">«</a></li>
<li><a href="/index/">1</a></li>
<li class="active"><a>2</a></li>
<li><a href="/index/?page=3">3</a></li>
<li><a href="/index/?page=4">4</a></li>
<li><a href="/index/?page=5">5</a></li>
<li class="next"><a href="/index/?page=3">»</a></li>
</ul>
</div>
展现结果如下，效果不是很理想，推荐使用第一种。
