项目地址
前端示例代码:
<!DOCTYPE html> <html> <head> <title></title> <link href="{{ url_for("static",filename="bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" media="screen"> </head> <body> <!--点击查询--> <input type="button" value="点击" onclick="query()"> <!--这个地方展示数据--> <table id="data-table"> <tr> <th>UID</th> <th>时间</th> <th>channel</th> </tr> </table> <!--这个地方展示分页--> <ul class="pagination"> </ul> <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="{{ url_for("static",filename="bootstrap/js/bootstrap.min.js") }}"></script> <script type="text/javascript" src="{{ url_for("static",filename="jquery-bootstrap-pagination.js") }}"></script> <script> function sendmsg(url,data,func){ $.getJSON(url,data,func) } //进行查询 function query(e,page){ var query = {}; query['page'] = page; //这里另每页数量为5,可自行调整 query['page_size'] = 5; sendmsg("/api/count",query,loadlist); } //返回结果处理 function loadlist(json){ $(".loaded-data").remove(); for(var i=0;i<json.results.length;i++){ $("#data-table").append( "<tr class=\"loaded-data\"><th>" + json.results[i]["uid"] + "</th><th>" + json.results[i]["dt"]+ "</th><th>" + json.results[i]["channel"]+ "</th></tr>") } //这里回调 $(".pagination").unbind(); $(".pagination").pagination({ total_pages:json.total_pages, current_page:json.current_page, callback:query }); } </script> </body> </html>后端示例代码: 这里使用python+mongoengine
class TestApi(MethodView): def get(self): page = request.args.get("page", 1, int) page_size = int(request.args.get("page_size", int)) p = (page - 1) * page_size # 由于模拟数据少,所以直接查询所有 query_result = RegisterRecord.objects() # 多个查询条件的话,可以: # query = {} # query['id__lte'] = ObjectId.from_datetime(datetime.utcnow()) # query['id__gte'] = ObjectId.from_datetime(datetime.now()) # result = RegisterRecord.objects(**query) count = query_result.count() total_page = self.get_page_number(count, page_size) current_page = page result = query_result.skip(p).limit(page_size) results = [] for record in result: dt = record.pk.generation_time uid = record.uid channel = record.channel results.append(dict(dt=dt, uid=uid, channel=channel)) return jsonify(results=results, total_pages=total_page, current_page=current_page) @staticmethod def get_page_number(count, page_size): count = float(count) page_size = abs(page_size) if page_size != 0: total_page = math.ceil(count / page_size) else: total_page = math.ceil(count / 5) return total_page这要就行啦,嗯,就是这样~