关于flask入门教程-图书借阅系统-分页显示数据

 在做网页的过程中，随着展示的数据增多，如果要在一页中显示全部内容，浏览速度会变慢且不符合实际需求。在 Web 浏览器中， 内容多的网页需要花费更多的时间生成、下载和渲染， 所以网页内容变多会降低用户体验的质量。这一问题的解决方法是分页 显示数据，进行片段式渲染。

flask进行分页显示数据提供了两种方法，一种是Flask-SQLAlchemy 的Pagination对象，一种是flask_paginate包，其实两者是高度一致的，flask_paginate是直接将Pagination和BootStrap做了绑定，但其实效果不是很好，估计是CSS之间有冲突。

其他方法则是自己定制代码实现分页。

paginate() 方法的返回值是一个 Pagination 类对象，这个类在 Flask-SQLAlchemy 中定义。这个对象包含很多属性， 用于在模板中生成分页链接，因此将其作为参数传入了模板。

@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页面代码如下：

{% 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也可以直接使用，代码就不做详细解读了

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,
                           )

相关页面代码如下，要比上面简洁一些。

{% 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样式。

<div class="pagination">
        <ul>
                <li class="previous"><a href="/index/">&laquo;</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">&raquo;</a></li>
        </ul>
</div>

展现结果如下，效果不是很理想，推荐使用第一种。