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