分页操作前端页面

<!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)