首页 > 代码库 > Flask添加翻页功能（非sqlalchemy）
Flask添加翻页功能（非sqlalchemy）
最近做flask的项目，需要增加翻页的功能，网上找的教程都是结合sqlalchemy的，可是我用的不是sqlalchemy，肿木办呢？
以下是我的做法
一、前端
1、传递页码
前端我使用ajax提交表单的，所以在前端的表单里加上page这一项（隐藏），然后在ajax中编辑这一项的value并提交到后端，页码就是这么传递到后端的
表单的代码
<form id ="submit_form"> {{ form.hidden_tag() }} <div id="input-top"> <div class="form-group"> <label>{{ form.account_id.label }}</label> {{ form.account_id }} <label>{{ form.user_id.label }}</label> {{ form.user_id }} <br/> <label>{{ form.character_name.label }}</label> {{ form.character_name }} <input id="page" name="page" type="hidden" value="1"/> </div> </div> <button type="button" class = "querybtn" onclick="ajaxForm()">查询</button> </form>
ajax的代码
//ajax提交表单 function ajaxForm(page_id){ //varifyinput(); document.getElementById("page").value = http://www.mamicode.com/page_id;//在此编辑表单中的page，提交到后端，注意要在获取表单前编辑，否则提交的就是上一次翻页的值 var form= new FormData(document.getElementById("submit_form")); $.ajax({ url:"{{ url_for(‘main.query_character_list‘) }}", type:"post", data:form, dataType: ‘json‘, processData:false, contentType:false, beforeSend:function(){ $("#dialog_message").show(); del_table(); }, success:function(data){ $("#dialog_message").hide(); create_table(data.result_table); if(Number(data.length)>0){ table_length = Number(data.length)//如果是第一次查询，更新总页数 } if(page_id === 1){ cur_page = 1;//为当前页的页码赋值 document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length//编辑页面显示页码 } }, error:function(e){ $("#dialog_message").hide(); del_table(); alert("没有取得数据"); } }) }
2、翻页函数
翻页使用按钮来翻页，按钮按下直接执行js的翻页函数，函数中为页码加减后调用ajax提交表单，并更新网页上显示的页码值
html代码
<button type="button" class = "pagebtn" onclick="prev_page()">上一页</button> <span id ="page_display" style="display: inline">当前页0/0</span> <button type="button" class = "pagebtn" onclick="next_page()">下一页</button>
js代码
//翻页函数 function next_page(){ cur_page = cur_page + 1; if(cur_page < table_length){ ajaxForm(cur_page); document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length } else if(cur_page === table_length){ ajaxForm(cur_page); document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length } else{ cur_page = table_length; document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length } } function prev_page(){ cur_page = cur_page - 1; if(cur_page > 1){ ajaxForm(cur_page); document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length } else if(cur_page === 1){ ajaxForm(cur_page); document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length } else{ cur_page = 1; document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length; } }
3、总页数
总页数这个是后端在第一次查询数据的时候全量查询数据，然后计算出来的，这样后边每次翻页只要查询翻页范围内的数据就行，而不用获得，前面的ajax中在第一次查询的时候会更新总长度length的值，这个要首先在js中申明变量，不然会出错
我的代码中因为有些事不需要点击查询就会自动显示全部数据，所以在初始化length变量时直接使用jinja2的{{}}从后端获取
JS代码
var table_length = "{{length}}";//分页总长度，注意js中引用jinja2的变量要用双引号括起来 var cur_page = 1;
二、后端
后端就见仁见智了，我的程序是view函数先将变量传到相应的数据处理对象格式化数据，然后调用其他对象从数据库查询，这样在就分为view，处理对象，调用类 三个方面来处理
1、view
分页长度在登录时放到session里，session[‘page_interval‘]
视图函数通过表单获取页码，传递给后端，这里也要分第一次查询和后续查询
if form.validate_on_submit(): page = request.form[‘page‘] AccountList_obj = AccountList(form, db_obj, page)#个人的代码习惯，先实例化再调用方法 (result, length) = AccountList_obj.process() if page == ‘1‘: # 第一次查询的时候返回的页码是第一页，这时候做全量查询，但是只返回一部分数据和所有的页码，之后每次查询都只查询一部分，但是如果又翻回第一页就只能陪绑了 return jsonify({"result_table": result, ‘length‘: length}) # 是第一页就更新js的length变量，否则就不更新 else: return jsonify({"result_table": result, ‘length‘: 0})#这个length就约定为0，如果是0前端js就不会更新length
2、处理对象
向调用的对象传递页码，如果是第一页还要一些特殊的处理，得到页数并只输出第一页
def process(self): #其他处理语句 page_interval = session[‘page_interval‘]#获取每页间隔 #分页返回结果 if self.page == 1: # 第一次查询，返回全量 AccountListProcess_obj = AccountListProcess(account_id = account_id, fb_account = fb_account, db_conn = db_conn) result = AccountListProcess_obj.process() #计算总页数 if len(result) % page_interval == 0:#如果正好是间隔的整数倍条数据 page_length = len(result) / page_interval else: page_length = len(result) / page_interval + 1 if page_length == 0:#如果不足一页最少也是一页 page_length = 1 return (result[0:page_interval], page_length) else: AccountListProcess_obj = AccountListProcess(account_id=account_id, fb_account=fb_account, db_conn=db_conn, page=self.page) result = AccountListProcess_obj.process() return (result, 0) # 第二个随便了
3、调用的对象
先拼接数据库中查询的limit语句，然后在拼接sql语句的时候吧这个语句放到最后
def process(self): #blah blah blah page_interval = session[‘page_interval‘] page_start = self.page * page_interval if self.page == 0: page_str = "" else: page_str = "limit {page_start},{page_interval}".format(page_start=page_start,page_interval=page_interval) #blah blah blah sql = ‘‘‘ blah blah blah {page_str}; ‘‘‘.format(page_str=page_str) #execute sql and blah blah blah
三、最终结果
如图
如果我有什么做得不对的地方，请各位指出来，反正我也不会改的
Flask添加翻页功能（非sqlalchemy）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。