<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div id="example"></div>
<script src="../lib/jquery-1.9.1.min.js"></script>
<script src="../lib/bootstrap.min.js"></script>
<script src="../build/bootstrap-paginator.min.js"></script>
<script>
let currentPage = 1;//当前页
let pageSize = 3;//每页显示多少条
function render() {
$.ajax({
url: "xxx",
data: {
page: currentPage,
pageSize: pageSize,
content: 'HUM',
imei: '867726030890182',
},
dataType: "json",
success: function (result) {
console.log(result);
// 将数据渲染到页面 ***前端渲染数据*******
$("#example").text('你好！！');
// 调用分页函数.参数:当前所在页, 总页数(用总条数 除以 每页显示多少条,在向上取整), ajax函数
setPage(currentPage, Math.ceil(result.count / pageSize), render)
}
})
}
render();
/**
*
* @param pageCurrent 当前所在页
* @param pageSum 总页数
* @param callback 调用ajax
*/
function setPage(pageCurrent, pageSum, callback) {
$("#example").bootstrapPaginator({
size: "small",//控件的大小
alignment: "center",//控件的位置
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末尾";
case "page":
return page;
}
},
// 显示第几页
currentPage: pageCurrent,
// 总页数
totalPages: pageSum,
//当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
onPageClicked: function (event, originalEvent, type, page) {
// 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
currentPage = page;
callback && callback()
}
})
}
</script>
</body>
</html>
前端
content = self.get_argument('content')
imei = self.get_argument('imei')
currentPage = int(self.get_argument('page')) # 当前页
pageSize = int(self.get_argument('pageSize')) # 每页多少条
query = db_session.query(Alarm).filter(Alarm.content == content, Alarm.IMEI == imei) # Query对象
count = query.count() # 总数
# limit x offset y 跳过y条数据，读x条数据
# values得到的是一个生成器
all_alarm = [{'warning': obj.warning, 'createtime': obj.createtime} for obj in
query.limit(pageSize).offset((currentPage - 1) * pageSize).values(Alarm.warning,
Alarm.createtime
)]
self.write(json.dumps({'code': 0, 'data': all_alarm, 'count': count}, cls=DatetimeEncoder,
ensure_ascii=False))
后端
应用组件：Bootstrap-Paginator
参数地址请参考：https://www.cnblogs.com/zooey/p/9218089.html
组件GItHub地址：https://github.com/lyonlai/bootstrap-paginator