1、引入分页插件样式
<link rel="stylesheet" href="../static/css/jquery.pagination.css">
2、引入jquery分页插件
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.pagination.min.js"></script>
3、应用分页插件
<div class="box">
<div id="pagination" class="page"></div>
</div>
<script>
$(function() {
$("#pagination").pagination({
// data.current_pag 当前页
currentPage: {{data.current_page}},
// data.total_page 总页数
totalPage: {{data.total_page}},
// 点击页码所执行的函数
callback: function(current) {
var keyword = $(".input_txt").val()
window.location.href="http://127.0.0.1:5000/admin/newsreview?page="+current
}
});
});
</script>
4、后台逻辑
# 分页查询方式 使用paginate ，参数1：想要的页码 参数2：每页显示的条数
news_list = News.query.filter(News.title.like('%' + keyword + '%')).paginate(page, 2, False)
5、组织数据
# 数据
d = {}
d['newslist'] = news_list.items # 经过筛选的新闻列表
d['current_page'] = news_list.page # 当前页
d['total_page'] = news_list.pages # 总页数
@admin_blue.route('/fenye',methods=['GET','POST'])
def fenye():
page = request.args.get('page',1,type=int) #获取配置
category = Category.query.filter().paginate(page,2,False) #按分页查询数据
d = {}
d['news'] = category.items #数据在items里
d['current_page'] = category.page #当前页
d['total_page'] = category.pages #总页
return render_template('fenye.html',data=d)
<table border="1">
<tr>
<td>序号</td>
<td>名称</td>
</tr>
{% for i in data.news %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ i.name }}</td>
</tr>
{% endfor %}
</table>
<div class="box">
<div id="pagination" class="page"></div>
</div>
<script>
$(function() {
$("#pagination").pagination({
// data.current_pag 当前页
currentPage: {{data.current_page}},
// data.total_page 总页数
totalPage: {{data.total_page}},
// 点击页码所执行的函数
callback: function(current) {
var keyword = $(".input_txt").val()
window.location.href="http://127.0.0.1:5000/admin/fenye?page="+current
}
});
});
</script>
