一、引入分頁插件樣式
<link rel="stylesheet" href="../static/css/jquery.pagination.css">
二、引入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>javascript
三、應用分頁插件
<div class="box">
<div id="pagination" class="page"></div>
</div>css
<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>
四、後臺邏輯
# 分頁查詢方式 使用paginate ,參數1:想要的頁碼 參數2:每頁顯示的條數
news_list = News.query.filter(News.title.like('%' + keyword + '%')).paginate(page, 2, False)
五、組織數據
# 數據
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>html
<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>java