Flask添加翻頁功能（非sqlalchemy）
阿新 • • 發佈：2017-06-16
lis 習慣 send end roc cnblogs col eat ()
最近做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
三、最終結果
如圖
如果我有什麽做得不對的地方，請各位指出來，反正我也不會改的
Flask添加翻頁功能（非sqlalchemy）