利用SQLAlchemy和Bootstrap实现数据分页显示

2/10/2017来源:ASP.NET技巧人气:1086

随着Web业务拓展,数据量会不断增长,如果在一个页面上将全部数据一次性显示出来,服务器和浏览器都会受到很大影响,不切合实际。一般的解决方式是采用分页显示的办法。在Flask框架中,可以利用SQLAlchemy实现分页查询,结合Bootstrap提供的强大CSS分页效果,完美地实现分页导航的效果。

0x01 创建虚拟数据

为了更好地体现显示分页效果,我们先在数据模型中虚拟足够的模拟数据。在Python中,我们可以利用Forgerypy来实现(参见利用ForgeryPy生成虚拟数据)。下面我们直接写两个函数来实现实验数据的生成:

Users.py:

#生成模拟数据 @staticmethod def generate_fake(count=100): from sqlalchemy.exc import IntegrityError from random import seed import forgery_py seed() for i in range(count): u=Users() u.username=forgery_py.internet.user_name(True) u.email=forgery_py.internet.email_address() u.passWord=forgery_py.lorem_ipsum.word() u.confirmed=True u.about_me=forgery_py.lorem_ipsum.sentence() u.realname=forgery_py.name.full_name() u.location=forgery_py.address.city() u.registerTime=forgery_py.date.date(True) db.session.add(u) try: db.session.commit() except IntegrityError: #回滚 db.session.rollback()

Posts.py:

@staticmethod def generate_fake(c=100): from random import randint,seed import forgery_py from Users import Users seed() count=db.session.query(Users).count() for i in range(c): u=db.session.query(Users).offset(randint(0,count-1)).first() p=Posts(author=u) p.body=forgery_py.lorem_ipsum.sentence() p.timestamp=forgery_py.date.date(True) db.session.add(p) db.session.commit()

0x02 渲染数据

定义支持分页显示的路由:

#分页显示 page=request.args.get('page',1,type=int) pagination=Posts.query.order_by(Posts.timestamp.desc()).paginate( page,per_page=5, error_out=False ) posts=pagination.items return render_template('main/index.html',posts=posts,form=form,pagination=pagination)

通过request.args.get获取需要显示的页码(type定义为整数,异常默认为1),per_page定义了每页显示的记录的个数。error_out参数如果设置成True,当请求的页数超过了总的页数范围,就会返回一个404错误,如果设为False,就会返回一个空列表。这样修改后,页面只会显示有限的记录数量。

0x03 添加分页导航

paginate()方法返回了一个Pagination对象。这个类在Flask-SQLAlchemy中定义,包含大量属性和方法,可以非常方便地生成分页导航模型。

属性:

序号 属性 说明
1 items 当前页的记录个数
2 query 分页的源查询
3 page 当前的页数
4 PRev_num 上一页数
5 next_num 下一页数
6 has_prev 是否有上一页
7 has_next 是否有下一页
8 pages 总的页数
9 per_page 每页显示的记录条数
10 total 总的记录条数

方法:

序号 方法 说明
1 iter_pages(left_edge=2,left_current=2,right_current=5,right_age=2) 一个迭代器,返回选中当前页时显示的页数列表。如这个例子中最左边显示2个页数,当前页的左边显示2个页数,当前页的右边显示5个页数而当前页的最右边显示2个页数
2 prev() 上一页的分页对象
3 next() 下一页的分页对象

结合Bootstrap提供的分页CSS效果,我们可以实现一个美观的分页导航。定义一个macro宏(/templates/_macros.html):

{% macro pagination_widget(pagination, endpoint, fragment='') %} <div class="pagination"> <ul class="pagination"> <li{% if not pagination.has_prev %} class="disabled"{% endif %}> <a href="{% if pagination.has_prev %}{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}"> &laquo; </a> </li> {% for p in pagination.iter_pages() %} {% if p %} {% if p == pagination.page %} <li class="active"> <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a> </li> {% else %} <li> <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a> </li> {% endif %} {% else %} <li class="disabled"><a href="#">&hellip;</a></li> {% endif %} {% endfor %} <li{% if not pagination.has_next %} class="disabled"{% endif %}> <a href="{% if pagination.has_next %}{{ url_for(endpoint, page=pagination.next_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}"> &raquo; </a> </li> </ul> </div> {% endmacro %}

可以在视图模板的适当位置引入这个宏:

{%extends 'base.html'%} {%import 'bootstrap/wtf.html' as wtf%} {%import '_macros.html' as macros%} …… {%if pagination%} {{macros.pagination_widget(pagination,'main.index')}} {%endif%}

这样就实现了分页导航的效果:

0x04 功能拓展

我们可以对分页导航进行拓展(参见Bootstrap学习总结笔记(12)– 基本组件之分页)。

_macros.html中添加跳转功能:

{% macro pagination_widget(pagination, endpoint, fragment='') %} <div class="pagination"> <ul class="pagination"> <li{% if not pagination.has_prev %} class="disabled"{% endif %}> <a href="{% if pagination.has_prev %}{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}"> &laquo; </a> </li> {% for p in pagination.iter_pages() %} {% if p %} {% if p == pagination.page %} <li class="active"> <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a> </li> {% else %} <li> <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a> </li> {% endif %} {% else %} <li class="disabled"><a href="#">&hellip;</a></li> {% endif %} {% endfor %} <li{% if not pagination.has_next %} class="disabled"{% endif %}> <a href="{% if pagination.has_next %}{{ url_for(endpoint, page=pagination.next_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}"> &raquo; </a> </li> <li class="pull-right"> <label for="transfer_page">跳转到:</label> <input type="text" class="text-info" size="3" id="transfer_page"> <button type="button" class="btn btn-primary btn-sm" id="transfer">Go</button> </li> </ul> </div> {% endmacro %}

在视图模板中加入js代码:

{%block scripts%} {{super()}} <script type="text/javascript"> $(function(){ $('#transfer').click(function(){ var page=$('#transfer_page').val(); window.location.href="{{url_for('main.index')}}"+"?page="+page; }) }) </script>

效果如下: