Flask ----- 前端页面分页器对象
Flask和Django都有的分页器类 Pageinations
分页器对象属性和方法
分页流程示例
借书管理系统流程及步骤
分页操作前端页面
<!DOCTYPE html><html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>读者信息列表
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link href="/static/css/signin.css" rel="stylesheet">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation
<span class="icon-bar">
<span class="icon-bar">
<span class="icon-bar">
<a class="navbar-brand" href="/bookManager">图书管理
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/bookall">图书列表
{{items }}
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">查询
<ul class="nav navbar-nav navbar-right">
<li><a href="/">注销
</div>
<div class="table-responsive">
读者类 读者id
读者姓名 reader_name
读者密码 reader_pass
读者信誉度 reader_credit
读者地址 reader_address
读者电话 reader_phone
读者是否注册激活
读者等级id外键 ForeignKey
-->
<table class="table table-hover">
<th>读者id
<th>读者姓名
<th>读者密码
<th>读者信誉度
<th>读者地址
<th>读者电话
<th>读者是否注册激活
<th>读者等级
<th>读者操作
{%for i in items %}
<td>{{i.id }}
<td>{{i.reader_name }}
<td>{{i.reader_pass }}
<td>{{i.reader_credit }}
<td>{{i.address or '' }}
<td>{{i.phone }}
<td>{{i.is_activate }}
<td>{{i.grand_id }}
<a href="#">修改
<a href="#">删除
{%endfor %}
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
{%if paginate.has_prev %}
<a href="/readerall?page={{paginate.prev_num }}" aria-label="Previous">
<span aria-hidden="true">«
{%endif %}
{%for i in paginate.iter_pages() %}
{%if paginate.page ==i %}
<li class="active">
<a href="/readerall?page={{i }}">{{i }}
{%else %}
<a href="/readerall?page={{i }}">{{i }}
{%endif %}
{%endfor %}
{%if paginate.has_next %}
<a href="/readerall?page={{paginate.next_num }}" aria-label="Next">
<span aria-hidden="true">»
{%endif %}
<h3>当前第{{paginate.page }}页
<h4>总页数{{paginate.pages}}页
<a class="btn btn-primary btn-block btn-lg" href="reader.html" role="button">返回
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js">
</html>
后端页面显示
#分页器对象pageinate为Pageination类的对象
@app.route('/readerall',methods=['GET'])
def reader_all():
#默认显示第一页
page=int(request.args.get('page',1))
#获取分页器对象
paginate=Reader.query.paginate(1,2)
#解决页数非正常时的页数显示方式
if page<=0:
page=1
if page > paginate.pages:
page=paginate.pages
paginate=Reader.query.paginate(page,3)
#获取当前页面数据
readers=paginate.items
return render_template('reader_list.html',items=readers,paginate=paginate)
分页显示前端页面展示
密码修改页面显示
书籍管理员页面展示
