Flask用paginate实现数据分页
Last updated
Last updated
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'])