Flask用paginate实现数据分页

Flask用paginate实现数据分页

Flask中用paginate可实现数据分页效果，首先梳理一下paginate的知识点。

1.paginate的用法

• paginate(page, per_page, error_out=True)

  page 当前页数 per_page 每页显示的条数 error_out 是否打印错误信息

2.paginate的属性

• a)paginate.page 当前页数

• b)paginate.pages 总页数

• c)paginate.total 数据总条数

• d)paginate.has_prev 是否存在上一页,返回布尔值

• e)paginate.has_next 是否存在下一页,返回布尔值

• f)paginate.iter_pages() 所有页码,返回列表 如[1, 2, 3, 4]

• g)paginate(page, per_page,error_out).items,返回当前页的所有数据

• prev_num 上一页页码

  next_num 下一页页码

  items 当前页面中的所有记录(比如当前页上有5条记录，items就是以列表形式组织这5个记录)

  query 当前页的query对象(通过query对象调用paginate方法获得的Pagination对象)

实例 查询所有学生信息，每页显示2条数据，可以通过页码和上一页、下一页跳转页面。

a)视图

@stu.route('/stupage/')
def stu_page():

    page = int(request.args.get('page', 1))
    per_page = int(request.args.get('per_page', 2))

    paginate = Student.query.order_by('-s_id').paginate(page, per_page, error_out=False)

    return render_template('stupage.html', paginate=paginate)

b)html页面解析数据

<div data-gb-custom-block data-tag="extends" data-0='base_main.html'></div>




<div data-gb-custom-block data-tag="block">


    分页显示学生信息

</div>




<div data-gb-custom-block data-tag="block">
    <h2>学生信息</h2>
    <div data-gb-custom-block data-tag="for">
        学生编号：{{ stu.s_id }}<br>
        学生姓名：{{ stu.s_name }}<br>
        学生年龄：{{ stu.s_age }}<br>
        <br>
    </div>

    当前页数：{{ paginate.page }}
    总页数：{{ paginate.pages }}
    一共有{{ paginate.total }}条数据
    <br>

    <div data-gb-custom-block data-tag="if">
        <a href="/stu/stupage/?page={{ paginate.prev_num }}">上一页</a>
    </div>
    页码：
    <div data-gb-custom-block data-tag="for">
        <a href="/stu/stupage/?page={{ i }}">{{ i }}</a>
    </div>

    <div data-gb-custom-block data-tag="if">
        <a href="/stu/stupage/?page={{ paginate.next_num }}">下一页</a>
    </div>



</div>

注意页面中a链接的地址，需要传入参数

实操

• 一个是显示用户的页面(user_table.html)，

• 一个是分页页面(page_base.html)

** page_base.html **

<div data-gb-custom-block data-tag="macro">




<div data-gb-custom-block data-tag="if">


<ul class="pagination">

    <li><a href="{{ url_for(url) }}?page={{ 1 }}">«首页</a></li>

    <div data-gb-custom-block data-tag="if">
        <li><a href="{{ url_for(url) }}?page={{ data.prev_num }}">«上一页</a></li>
    <div data-gb-custom-block data-tag="else"></div>
        <li class="disabled"><a href="#">上一页</a></li>
    </div>


    <div data-gb-custom-block data-tag="if" data-0='5' data-1='5' data-2='5' data-3='5' data-4='5' data-5='5' data-6='5' data-7='5' data-8='5' data-9='5' data-10='5' data-11='5'>

        <div data-gb-custom-block data-tag="if" data-0='4' data-1='4' data-2='4' data-3='4' data-4='4' data-5='4' data-6='4'>

            <div data-gb-custom-block data-tag="for" data-0='1' data-1='1' data-2='1' data-3='1' data-4='1' data-5='1' data-6='1' data-7='1' data-8='1' data-9='1' data-10='1' data-11='1' data-12='4' data-13='4'>
                <div data-gb-custom-block data-tag="if">
                    <li class="active"><a href="#">{{ i }}</a></li>
                <div data-gb-custom-block data-tag="else"></div>
                    <li><a href="{{ url_for(url) }}?page={{ i }}">{{ i }}</a></li>
                </div>
            </div>

        <div data-gb-custom-block data-tag="elif" data-0='3' data-1='3' data-2='3' data-3='3' data-4='3' data-5='3' data-6='3' data-7='3' data-8='3' data-9='3' data-10='3' data-11='3' data-12='3' data-13='3' data-14='3' data-15='3' data-16='3' data-17='3' data-18='3' data-19='3' data-20='3' data-21='3' data-22='3' data-23='3'></div>

            <div data-gb-custom-block data-tag="for" data-0='-3' data-1='-3' data-2='-3' data-3='-3' data-4='-3' data-5='-3' data-6='-3' data-7='-3' data-8='-3' data-9='-3' data-10='-3' data-11='3' data-12='1' data-13='1' data-14='1' data-15='1' data-16='1' data-17='1' data-18='1' data-19='1' data-20='1' data-21='1' data-22='1' data-23='1' data-24='1'>
                <div data-gb-custom-block data-tag="if">
                    <li class="active"><a href="#">{{ i }}</a></li>
                <div data-gb-custom-block data-tag="else"></div>
                    <li><a href="{{ url_for(url) }}?page={{ i }}">{{ i }}</a></li>
                </div>
            </div>

        <div data-gb-custom-block data-tag="else"></div>

            <div data-gb-custom-block data-tag="for" data-0='-3' data-1='-3' data-2='-3' data-3='-3' data-4='-3' data-5='-3' data-6='-3' data-7='-3' data-8='-3' data-9='-3' data-10='-3' data-11='4' data-12='4' data-13='4' data-14='4' data-15='4' data-16='4' data-17='4' data-18='4' data-19='4' data-20='4' data-21='4' data-22='4'>
                <div data-gb-custom-block data-tag="if">
                    <li class="active"><a href="#">{{ i }}</a></li>
                <div data-gb-custom-block data-tag="else"></div>
                    <li><a href="{{ url_for(url) }}?page={{ i }}">{{ i }}</a></li>
                </div>
            </div>

        </div>

    <div data-gb-custom-block data-tag="else"></div>

        <div data-gb-custom-block data-tag="for">
            <div data-gb-custom-block data-tag="if">
                <li class="active"><a href="#">{{ v }}</a></li>
            <div data-gb-custom-block data-tag="else"></div>
                <li><a href="{{ url_for(url) }}?page={{ v }}">{{ v }}</a></li>
            </div>
        </div>

    </div>


    <div data-gb-custom-block data-tag="if">
        <li><a href="{{ url_for(url) }}?page={{ data.next_num }}">下一页</a></li>
    <div data-gb-custom-block data-tag="else"></div>
        <li class="disabled"><a href="#">下一页</a></li>
    </div>



    <li><a href="{{ url_for(url) }}?page={{ data.pages }}">»尾页 {{data.pages}} </a></li>
</ul>
  


</div>




</div>

users_table.html

<div data-gb-custom-block data-tag="extends" data-0='home/ifname_base.html'></div>





<div data-gb-custom-block data-tag="import" data-0='home/page_base.html'></div>





<div data-gb-custom-block data-tag="block"> 用户管理 </div>





<div data-gb-custom-block data-tag="block"> 
  <div class="card-body">
    
    <div class="table-responsive">
      <table class="table table-bordered">
        <!-- 表头 -->
        <thead>
          <tr>
            <th>
              <label class="lyear-checkbox checkbox-primary">
                <input type="checkbox" id="check-all"><span></span>
              </label>
            </th>
            <th>用户ID</th>
            <th>用户邮箱</th>
            <th>用户密码</th>
            <th>用户状态</th>
            <th>邮箱验证</th>
            <th>超级管理员</th>
            <th>创建时间</th>
            <th>用户备注</th>
            <th>操作</th>
          </tr>
        </thead>

        <!-- 表内 -->
        <tbody>
          <tr>
            <td>
              <label class="lyear-checkbox checkbox-primary">
                <input type="checkbox" name="ids[]" value="1"><span></span>
              </label>
            </td>

            <div data-gb-custom-block data-tag="for">
            <td>{{ v.id }}</td>
            <td>{{ v.email }}</td>
            <td>{{ v.hashed_password }}</td>
            <td>{{ v.is_active }}</td>
            <td>{{ v.is_verfication }}</td>
            <td>{{ v.is_superuser }}</td>
            <td>{{ v.ct_time }}</td>
            <td>{{ v.description }}</td>
            <!-- <td><font class="text-success">正常</font></td> -->
            <td>
              <div class="btn-group">
                <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
              </div>
            </td>

            </div>



          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    {{ pg.page(page_data,'authentication.users') }}

  </div>
  

</div>





<div data-gb-custom-block data-tag="block">



<script type="text/javascript">
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });
</script>


</div>

views.py

class UsersView(views.MethodView):
    def get(self):
        args = request.args
        page = int(args.get('page', 1))           # 当前页数
        per_page = int(args.get('per_page', 10))  # 每页显示的条数
        search = args.get('search', None)
        print(page,per_page,search)

        if search and len(search.split(',')) > 0:   # 判断是否有搜索的数据
            OR_ = or_( Users.email == s.replace(' ','') for s in search.split(','))
            obj = Users.query.filter(OR_).order_by(Users.id.asc())
            page_data = obj.paginate(page, per_page)
        else:
            page_data = Users.query.order_by(Users.id.asc()).paginate(page,per_page)

        # print(page_data)
        return render_template('home/users_table.html', page_data=page_data)

blueprint.add_url_rule('/users', endpoint='users', view_func=UsersView.as_view('users'), methods=['GET', 'POST'])