Flask快速实现分页效果示例

先上整体效果图:

然后是分页图详情:

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

路由: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 分页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Python的Flask框架中实现分页功能的教程

    Blog Posts的提交 让我们从简单的开始.首页上必须有一张用户提交新的post的表单. 首先我们定义一个单域表单对象(fileapp/forms.py): class PostForm(Form): post = TextField('post', validators = [Required()]) 下面,我们把这个表单添加到template中(fileapp/templates/index.html): <!-- extend base layout --> {% extends &

  • python flask实现分页效果

    在我们学习的过程中会遇到这么样的问题,就是在我们学习的过程中会发现需要分页处理,这里呢,给大家介绍书上说的分页. @app.route('/',methods=['GET']) @app.route('/<int:page>') def home(page=1): pagination=Post.query.order_by(Post.publish_date.desc()).paginate(page, per_page=10,error_out=False) posts = paginat

  • python flask实现分页的示例代码

    结合mysql数据库查询,实现分页效果 @user.route("/user_list",methods=['POST','GET']) def user_list(): p = g.args.get("p", '') #页数 show_shouye_status = 0 #显示首页状态 if p =='': p=1 else: p=int(p) if p > 1: show_shouye_status = 1 mdb = db_session() limit

  • Python利用flask sqlalchemy实现分页效果

    Flask-sqlalchemy是关于flask一个针对数据库管理的.文中我们采用一个关于员工显示例子. 首先,我们创建SQLALCHEMY对像db. from flask import Flask, render_template,request from flask_sqlalchemy import SQLAlchemy app = Flask(__name__,static_url_path='') app.debug = True app.secret_key = "faefasdfa

  • Flask快速实现分页效果示例

    先上整体效果图: 然后是分页图详情: 与本例相关的路由和模板包括: 路由: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的内容.

  • JS鼠标滚动分页效果示例

    首先先看问题: 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢. 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉.最简单的办法就是不分页(^_^) 但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页! 问了其他同事,其他同事也...你去百度去.... 是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图...坑 经过一番思考,和百度 思路来了: 需要了解三个dom元素,

  • 使用Mybatis实现分页效果示例

    一.创建分页的工具类PageUti,存储分页所需要的五个数据:pageIndex(当前页码),pageSize(每页记录条数),count(总记录数),pageNum(总页数),list(每一页的内容). /** * @param <T> 泛型类 */ public class PageUtil<T> { //当前页码 private int pageIndex; //每页记录数 private int pageSize; //总记录数 private int count; //总

  • Python+Flask实现自定义分页的示例代码

    目录 前言 后端 后端思路 后端代码 前端 前端思路 前端代码 前言 分页操作在web开发中几乎是必不可少的,而我们的flask不像django自带封装好的分页操作,要分页则需要依赖flask-sqlalchemy中的分页查询,但是分页这么重要且简单的操作,自己实现必须要会这个思维,我也在网上看了一些,但大体上不合我意,因此这篇我带大家手写一个分页操作! 后端 后端思路 写这个分页操作前我们首先要思考我们需要什么?我们需要将我们需要的东西封装到一个字典里,然后传给前端!那么这里我先说分页算法,很

  • Laravel框架实现超简单的分页效果示例

    本文实例讲述了Laravel框架实现超简单的分页效果.分享给大家供大家参考,具体如下: 每页展示5条数据 控制器 class indexCo extends Controller { public function cc () { $lists = UserAli:: orderBy('user_id','desc') -> paginate(5); return view('cc',compact('lists')); } } layout/main.blade.php <!DOCTYPE

  • JS分页效果示例

    分页 复制代码 代码如下: <script type="text/javascript" language="javascript" src="js/pager.js"></script> 复制代码 代码如下: /*--------pager-------*/ .number span a{padding:4px 6px;} .number span a:hover{padding:4px 6px; background-

  • 基于原生JS实现分页效果的示例代码

    这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o

  • Android Recyclerview实现水平分页GridView效果示例

    昨天UI妹子给了给需求,展示水平分页效果,而且第二页要默认显示一部分,提示用户水平可以滑动,先上效果图: 很明显横向滑动的分页,第一反应就是使用ViewPager,毕竟只要通过自定义ViewPager,实现这个效果还是很容易,但是实际中问题时,当前模块是Recyclerview中某一个Holder,为了性能,肯定尽量使用Recyclerview去复用View,而且ViewPager并不能复用,所以考虑之后,还是要用Recyclerview去实现. 解决思路 既然打算用Recyclerview实现

随机推荐