Flask快速实现分页效果示例

 更新时间:2022年8月19日 17:01  点击:262 作者:哦...

先上整体效果图:

然后是分页图详情:

与本例相关的路由和模板包括:

路由:views.py

@app.route('/blog/list/<int:page>', methods=['GET'])
@login_required
def blog_list(page=None):
    ...

模板:blog_list.html和pages.html

blog_list.html作为博客页面,pages.html模板为分页页面,呈现时会在blog_list.html中导入pages.html的内容。

{%import 'pages.html' as pg%}
{{pg.my_paginage(pagination,'art_list')}}

首先从路由开始:

路由的设计思路是根据查询的页码作为参数,利用FlaskSQLAlchemy的Model进行查询并对查询结果进行分页处理。

@app.route('/blog/list/<int:page>', methods=['GET'])
@login_required
def blog_list(page=None):
    #每个人只能看自己发表的blog
    if not page:
        page = 1
    from models import Blog
    from models import User
    user_id = User.query.filter_by(username=session['user']).first().id
    #paginate方法返回一个sqlalchemy.Pagination类型对象
    blogs = Blog.query.filter_by(user_id=user_id).order_by(Blog.addtime.desc()).paginate(page=page,per_page=3)
    category=[(1, '情感'), (2, '星座'), (3, '爱情')]
    return render_template('blog_list.html', title='博客列表',session=session,blogs=blogs.items,category=category,pagination=blogs)

分析一下上述代码:

1. @app.route装饰器定义了路由

2. @login_required是自定义装饰器,用来限定只有登录用户才可以浏览博客列表,未登录用户会进入登录页面

3. 作为Model的Blog中有一个外键属性user_id引用着用户表,用来记录博客的作者信息

4. blogs是一个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]

5. 渲染blog_list.html模板时,传入渲染时需要的若干参数,比较重要的是传入blogs参数用来让模板显示查询出来的应该在本页面中显示的博客信息,另外是传入pagination参数,利用传入的Pagination对象的相关属性方法动态生成分页的相关内容。

看一下pages.html模板的内容:

{%macro my_paginate(pagination,url)%}
<nav>
    <ul class="pagination">
 
        {%if pagination.has_prev%}
        <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page-1)}}" rel="external nofollow" >上一页</a></li>
        {%else%}
        <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >上一页</a></li>
        {%endif%}
 
            {%for page in pagination.iter_pages(1,1,3,1)%}
            {%if page%}
                <li class="page-item {%if page==pagination.page%}active{%endif%}"><a class="page-link" href="{{url_for(url,page=page)}}" rel="external nofollow" >{{page}}</a></li>
            {%else%}
                <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >&hellip;</a></li>
            {%endif%}
 
        {%endfor%}
 
        {%if pagination.has_next%}
        <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page+1)}}" rel="external nofollow" >下一页</a></li>
        {%else%}
        <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >下一页</a></li>
        {%endif%}
 
    </ul>
</nav>
{%endmacro%}

分析一下上述页面代码:、

整体来说就是根据当前对“上一页”,“页码”和“下一页”进行不同的设置

1. 使用JinJa2的宏,定义my_paginate方法,传入路径和pagination对象作为参数。通过调用宏的执行生成分页内容。

2. 通过设置class为pagination,可以使用FlaskBootStrap预置CSS样式

3. 利用JinJa2的if语句根据当前页是否还有前一页使用不同的元素和class。

    如果当前页有上一页,则pagination对象的has_prev为True,此时li标签的class为page-item和active,采用的BootStrap样式意      为此时上一页是可点的。点击后跳转的链接会是url_for函数根据传入的路由方法名称(也就是url参数值)并添加上page参数,参数值为当前页码-1

    如果当前页没有上一页,则pagination对象的has_prev为False,此时li标签的class为page-item和disable,采用的BootStrap样      式意为此时上一页是不可点的。跳转的链接会是#

4. 与“上一页”处理类似的是对“下一页”的处理。如果当前页有下一页时设置样式和点击跳转路径,如果没有下一页了,则设置为        不可点击并且跳转路径为#

5. 利用iter_page(1,1,3,1)会获得基于当前页应该显示的页码列表。如上面截图所示,如果当前页是第4页,获得的分页列表内容         就是[1,None,3,4,5,6,None,9],如果当前页是第9页,获得的分页列表内容是[1,None,8,9]

6. 利用JinJa2的for语句遍历列表,如果是页码,就根据页码生成a标签中的文字并设置跳转路径并添加上page参数。如果是None,a标签中的文字为实体名表示的省略号,路径为“#”。额外的,如果遍历时获得了当前页码所对应的数字时,为li标签的class属性添加上额外的active以获得额外的样式。

最后在blog_list.html中要引入pages.html

{%import 'pages.html' as pg%}
{{pg.my_paginate(pagination,'blog_list')}}

在blog_list.html中导入pages.html模板并调用pages.html中定义的my_pagination宏,传入两个参数,第一个参数是pagination对象,这个参数是从views.py中渲染blog_list.html的时候传入的,另外一个就是一个字符串'blog_list',它对应的是views.py中路由方法的名称,有了这个名称在my_paginate中就可以利用url_for函数进行路由方法对应路径的寻找。

到此这篇关于Flask快速实现分页效果示例的文章就介绍到这了,更多相关Flask 分页内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

原文出处:https://blog.csdn.net/piglite/article/details/82050234

[!--infotagslink--]

相关文章

  • php KindEditor文章内分页的实例方法

    我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
  • 自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
  • Springboot如何使用mybatis实现拦截SQL分页

    这篇文章主要介绍了Springboot使用mybatis实现拦截SQL分页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-19
  • PHP 一个完整的分页类(附源码)

    在php中要实现分页比起asp中要简单很多了,我们核心就是直接获取当前页面然后判断每页多少再到数据库中利用limit就可以实现分页查询了,下面我来详细介绍分页类实现程序...2016-11-25
  • python 实现Flask中返回图片流给前端展示

    今天小编就为大家分享一篇python 实现Flask中返回图片流给前端展示,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
  • AngularJS实现分页显示数据库信息

    这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
  • vue实现页面打印自动分页的两种方法

    这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-29
  • C# DataTable分页处理实例代码

    有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据。...2020-06-25
  • Python优化列表接口进行分页示例实现

    最近,在做测试开发平台的时候,需要对测试用例的列表进行后端分页,在实际去写代码和测试的过程中,发现这里面还是有些细节的,故想复盘一下...2021-09-29
  • 原生js实现分页效果

    这篇文章主要为大家详细介绍了原生js实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-24
  • 解析iReport自定义行数分页的操作方法

    ireport默认都是自动分页数据超出页面长度就会自动分到下一页,但有时候业务需要一页只显示固定几行这时候就需要自定义条数了。下面看具体操作吧...2021-10-26
  • MySQL分页优化

    这篇文章主要为大家详细介绍了MySQL分页优化,内容思路很详细,有意对MySQL分页优化的朋友可以参考一下...2016-04-22
  • EasyUI Pagination 分页的两种做法小结

    这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下...2016-07-25
  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
  • 编写PHP脚本来实现WordPress中评论分页的功能

    这篇文章主要介绍了编写PHP脚本来实现WordPress中评论分页的功能的方法,包括上一页下一页和导航式分页功能的添加,需要的朋友可以参考下...2015-12-14
  • Vue+Element-U实现分页显示效果

    这篇文章主要为大家详细介绍了Vue+Element-U实现分页显示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-15