最近做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 = 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
三、最终结果
如图
如果我有什么做得不对的地方，请各位指出来，反正我也不会改的
时间： 2024-08-23 23:25:05