Flask分页显示数据

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

在页面中渲染数据

<span style="font-size:18px;">app/main/views.py</span> 

@main.route('/userManage_admin', methods=['GET', 'POST'])
@login_required
def userManage_admin():
    user0 = User.query.filter_by(email=current_user.email).first()
    <strong>page = request.args.get('page', 1, type=int)</strong>
    if user0.user_role > 0:
        <strong>pagination = User.query.filter_by(user_role=0).paginate(page, per_page=current_app.config['FLASKY_POSTS_PER_PAGE'], error_out=False)
        usrs = pagination.items</strong>
        return render_template('userManage_admin.html', <strong>usrs=usrs,pagination=pagination</strong>)
    else:
        return redirect(url_for('.index'))

渲染的页数从请求的查询字符串( request.args)中获取,如果没有明确指定,则默认渲染第一页。参数 type=int 保证参数无法转换成整数时,返回默认值。为了显示某页中的记录, 要把 all() 换成 Flask-SQLAlchemy 提供的 paginate() 方法。页数是 paginate() 方法的第一个参数,也是唯一必需的参数。可选参数 per_page 用来指定每页显示的记录数量; 如果没有指定,则默认显示 20 个记录。另一个可选参数为 error_out,当其设为 True
时(默认值),如果请求的页数超出了范围,则会返回 404 错误;如果设为 False,页数超出范围时会返回一个空列表。为了能够很便利地配置每页显示的记录数量,参数 per_page 的值从程序的环境变量 FLASKY_POSTS_PER_PAGE 中读取。这样修改之后,  页面中的内容列表只会显示有限数量的信息。若想查看第 2 页中的信息,要在浏览器地址栏中的 URL 后加上查询字符串 ?page=2。

添加分页导航

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

分页对象的属性简介

在Flask-SQLAlchemy对象上可调用的方法

拥有这么强大的对象和 Bootstrap 中的分页 CSS 类,我们很轻易地就能在模板底部构建一个分页导航。

如下是以 Jinja2 宏的形式实现的分页导航。

<span style="font-size:18px;">app/templates/_macros.html:分页模板宏

</span>{% macro pagination_widget(pagination, endpoint) %}
<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) }}{% else %}#{% endif %}">
            «
        </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) }}">{{ p }}</a>
            </li>
            {% else %}
            <li>
                <a href="{{ url_for(endpoint, page = p, **kwargs) }}">{{ p }}</a>
            </li>
            {% endif %}
        {% else %}
        <li class="disabled"><a href="#">…</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) }}{% else %}#{% endif %}">
            »
        </a>
    </li>
</ul>
{% endmacro %}

这个宏创建了一个 Bootstrap 分页元素,即一个有特殊样式的无序列表,其中定义了下述页面链接。

? “上一页”链接。如果当前页是第一页,则为这个链接加上 disabled 类。

? 分页对象的 iter_pages() 迭代器返回的所有页面链接。这些页面被渲染成具有明确页数的链接,页数在 url_for() 的参数中指定。当前显示的页面使用 activeCSS 类高亮显示。页数列表中的间隔使用省略号表示。

? “下一页”链接。如果当前页是最后一页,则会禁用这个链接。

Jinja2 宏的参数列表中不用加入 **kwargs 即可接收关键字参数。分页宏把接收到的所有关键字参数都传给了生成分页链接的 url_for() 方法。这种方式也可在路由中使用,例如包含一个动态部分的资料页。

pagination_widget 宏可放在其他一些模板的后面。

<span style="font-size:18px;">app/templates/useManage_admin.html  <span style="font-size:18px;">在学生信息列表下面添加分页导航</span></span>

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}

{% block main %}
      {{ super() }}
    <div class="main">
.....................中间省略要显示的内容

    {% if pagination %}

    {{ macros.pagination_widget(pagination, '.sm_admin') }}

    {% endif %}

     </div>

{% endblock %}
时间: 2024-10-11 04:16:47

Flask分页显示数据的相关文章

PHP之分页显示数据-新闻系统

一.项目设计 1.项目要求 2.主页面使用frame框架进行设计,内容如下: index.php <span style="font-family:SimSun;font-size:18px;"><html> <frameset rows="80%,20%" frameborder="no" border="0" cols="900px"> <frameset co

jQuery+Ajax+PHP+Mysql实现分页显示数据

css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; curs

分页显示数据----前端(将数据库中的信息分页显示到网页)

在上篇文章中,我们已经完成了分页显示的后台处理,现在进行前端的处理. 期望显示结果: 由于对于不同的项目.不同的数据库数据部分不同,所以我们将分页部分提取出来,单独建立jsp页面: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c"

repeater 分页显示数据

表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Context;              // 构建LINQ public ChinaStatesDA() { Context = new DataClassesDataContext(); } public List<ChinaStates> Select(int nowye,int numbers)

JSP页面分页显示数据

效果如上图所示!最多显示10条:完整jsp和后台代码如下: <%@ page contentType="text/html;charset=UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/j

Sqlite 数据库分页查询(ListView分页显示数据)

下面介绍一下我的这个demo. 流程简述: 我在raw文件夹下面放了名称为city的数据库,里面包含全国2330个城市,以及所属省,拼音简写等信息. 首先 在进入MainActivity的时候,创建数据库并读入sd卡文件中data/data/databases/city. 然后 我再开启子线程去读取前50条数据,显示在ListView中. 当用户浏览数据, 前50条不够时,他会滑动ListView以查看更多数据,此时,listview的数据源会递增,50 ,100,150,.... 以50为增量

第一个smarty例子--分页显示数据

模板页index.tpl: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&qu

使用ivx实现分页获取数据的经验总结

在实际案例中我们经常需要展示一些数据,而这些数据都是存放在后台的数据库之中的而且可能数量庞大,在前台的界面中一下子全都展示出来肯定是不现实的,另外一次性让后台传输如此多的数据到前台也会有很大的延迟,使用户体验较差.因此,我们就需要采取一种分页的方式来少量多次的获取数据,这样用户每次操作之后都能很快得到反馈,同时前台也不用存放很多数据造成案例卡顿,今天就来说说如何实现这种分页效果.1.组件结构Demo中的结构比较简单,页面下放置了一个列作为案例主体,列内添加了一个分页组件,还有一个for容器用于循

PHP+Mysql————数据分页显示技术

通常情况下,一个页面加载大量的数据时,数据不可能同时显示出来.这时候,比较常用的方法就是滚动条和分页.看过电子书的孩子都知道,电子书那么多字,一个手机或pad的屏幕是无法全部显示的,开玩笑,一本几兆的书就好几百万字,一下子放到几寸的屏幕上,不得亮瞎你的眼.所以我们都是下滑使文字进行滚动或翻页.这篇博文就用来分享一下php的分页技术. 首先获取数据库中某表的数据,输出到网页上,然后再进行分页显示.一句话就讲明白了,但具体怎么分页的,请看代码. <?php header("content-ty