当前位置：Gxlcms > 数据库问题 > Flask添加翻页功能（非sqlalchemy）

Flask添加翻页功能（非sqlalchemy）

时间：2021-07-01 10:21:17 帮助过：26人阅读

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的代码

  1.     <span style="color: #008000">//</span><span style="color: #008000">ajax提交表单</span>
  2.     <span style="color: #0000ff">function</span><span style="color: #000000"> ajaxForm(page_id){
  3.         </span><span style="color: #008000">//</span><span style="color: #008000">varifyinput();</span>
  4.         document.getElementById("page").value = page_id;<span style="color: #008000">//</span><span style="color: #008000">在此编辑表单中的page，提交到后端，注意要在获取表单前编辑，否则提交的就是上一次翻页的值</span>
  5.         <span style="color: #0000ff">var</span> form= <span style="color: #0000ff">new</span> FormData(document.getElementById("submit_form"<span style="color: #000000">));
  6.         $.ajax({
  7.             url:</span>"{{ url_for(‘main.query_character_list‘) }}"<span style="color: #000000">,
  8.             type:</span>"post"<span style="color: #000000">,
  9.             data:form,
  10.             dataType: </span>‘json‘<span style="color: #000000">,
  11.             processData:</span><span style="color: #0000ff">false</span><span style="color: #000000">,
  12.             contentType:</span><span style="color: #0000ff">false</span><span style="color: #000000">,
  13.             beforeSend:</span><span style="color: #0000ff">function</span><span style="color: #000000">(){
  14.                     $(</span>"#dialog_message"<span style="color: #000000">).show();
  15.                     del_table();
  16.             },
  17.             success:</span><span style="color: #0000ff">function</span><span style="color: #000000">(data){
  18.                     $(</span>"#dialog_message"<span style="color: #000000">).hide();
  19.                     create_table(data.result_table);
  20.                     </span><span style="color: #0000ff">if</span>(Number(data.length)>0<span style="color: #000000">){
  21.                         table_length </span>= Number(data.length)<span style="color: #008000">//</span><span style="color: #008000">如果是第一次查询，更新总页数</span>
  22. <span style="color: #000000">                    }
  23.                     </span><span style="color: #0000ff">if</span>(page_id === 1<span style="color: #000000">){
  24.                         cur_page </span>= 1;<span style="color: #008000">//</span><span style="color: #008000">为当前页的页码赋值</span>
  25.                         document.getElementById("page_display").innerHTML="当前页"+cur_page+"/"+table_length<span style="color: #008000">//</span><span style="color: #008000">编辑页面显示页码</span>
  26. <span style="color: #000000">                    }
  27.             },
  28.             error:</span><span style="color: #0000ff">function</span><span style="color: #000000">(e){
  29.                     $(</span>"#dialog_message"<span style="color: #000000">).hide();
  30.                     del_table();
  31.                     alert(</span>"没有取得数据"<span style="color: #000000">);
  32.             }
  33.         })
  34.     }</span>

　　2、翻页函数

　　翻页使用按钮来翻页，按钮按下直接执行js的翻页函数，函数中为页码加减后调用ajax提交表单，并更新网页上显示的页码值

　　html代码

  1.         <span style="color: #0000ff"><</span><span style="color: #800000">button </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> class </span><span style="color: #0000ff">= "pagebtn"</span><span style="color: #ff0000"> onclick</span><span style="color: #0000ff">="prev_page()"</span><span style="color: #0000ff">></span>上一页<span style="color: #0000ff"></</span><span style="color: #800000">button</span><span style="color: #0000ff">></span>
  2.         <span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">id </span><span style="color: #0000ff">="page_display"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="display: inline"</span><span style="color: #0000ff">></span>当前页0/0<span style="color: #0000ff"></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span>
  3.         <span style="color: #0000ff"><</span><span style="color: #800000">button </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> class </span><span style="color: #0000ff">= "pagebtn"</span><span style="color: #ff0000"> onclick</span><span style="color: #0000ff">="next_page()"</span><span style="color: #0000ff">></span>下一页<span style="color: #0000ff"></</span><span style="color: #800000">button</span><span style="color: #0000ff">></span>

　　js代码

  1.     <span style="color: #008000">//</span><span style="color: #008000">翻页函数</span>
  2.     <span style="color: #0000ff">function</span><span style="color: #000000"> next_page(){
  3.         cur_page </span>= cur_page + 1<span style="color: #000000">;
  4.         </span><span style="color: #0000ff">if</span>(cur_page <<span style="color: #000000"> table_length){
  5.             ajaxForm(cur_page);
  6.             document.getElementById(</span>"page_display").innerHTML="当前页"+cur_page+"/"+<span style="color: #000000">table_length
  7.         }
  8.         </span><span style="color: #0000ff">else</span> <span style="color: #0000ff">if</span>(cur_page ===<span style="color: #000000"> table_length){
  9.              ajaxForm(cur_page);
  10.             document.getElementById(</span>"page_display").innerHTML="当前页"+cur_page+"/"+<span style="color: #000000">table_length
  11.         }
  12.         </span><span style="color: #0000ff">else</span><span style="color: #000000">{
  13.             cur_page </span>=<span style="color: #000000"> table_length;
  14.             document.getElementById(</span>"page_display").innerHTML="当前页"+cur_page+"/"+<span style="color: #000000">table_length
  15.         }
  16.     }
  17.     </span><span style="color: #0000ff">function</span><span style="color: #000000"> prev_page(){
  18.         cur_page </span>= cur_page - 1<span style="color: #000000">;
  19.         </span><span style="color: #0000ff">if</span>(cur_page > 1<span style="color: #000000">){
  20.             ajaxForm(cur_page);
  21.             document.getElementById(</span>"page_display").innerHTML="当前页"+cur_page+"/"+<span style="color: #000000">table_length
  22.         }
  23.         </span><span style="color: #0000ff">else</span> <span style="color: #0000ff">if</span>(cur_page === 1<span style="color: #000000">){
  24.              ajaxForm(cur_page);
  25.             document.getElementById(</span>"page_display").innerHTML="当前页"+cur_page+"/"+<span style="color: #000000">table_length
  26.         }
  27.         </span><span style="color: #0000ff">else</span><span style="color: #000000">{
  28.             cur_page </span>= 1<span style="color: #000000">;
  29.             document.getElementById(</span>"page_display").innerHTML="当前页"+cur_page+"/"+<span style="color: #000000">table_length;
  30.         }
  31.     }</span>

　　3、总页数

　　总页数这个是后端在第一次查询数据的时候全量查询数据，然后计算出来的，这样后边每次翻页只要查询翻页范围内的数据就行，而不用获得，前面的ajax中在第一次查询的时候会更新总长度length的值，这个要首先在js中申明变量，不然会出错

　　我的代码中因为有些事不需要点击查询就会自动显示全部数据，所以在初始化length变量时直接使用jinja2的{{}}从后端获取

　　JS代码

  1.     <span style="color: #0000ff">var</span> table_length = "{{length}}";<span style="color: #008000">//</span><span style="color: #008000">分页总长度，注意js中引用jinja2的变量要用双引号括起来</span>
  2.     <span style="color: #0000ff">var</span> cur_page = 1;

二、后端

　　后端就见仁见智了，我的程序是view函数先将变量传到相应的数据处理对象格式化数据，然后调用其他对象从数据库查询，这样在就分为view，处理对象，调用类 三个方面来处理

　　1、view

　　分页长度在登录时放到session里，session[‘page_interval‘]

　　视图函数通过表单获取页码，传递给后端，这里也要分第一次查询和后续查询

  1.     <span style="color: #0000ff">if</span><span style="color: #000000"> form.validate_on_submit():
  2.         page </span>= request.form[<span style="color: #800000">‘</span><span style="color: #800000">page</span><span style="color: #800000">‘</span><span style="color: #000000">]
  3.         AccountList_obj </span>= AccountList(form, db_obj, page)<span style="color: #008000">#</span><span style="color: #008000">个人的代码习惯，先实例化再调用方法</span>
  4.         (result, length) =<span style="color: #000000"> AccountList_obj.process()
  5.         </span><span style="color: #0000ff">if</span> page == <span style="color: #800000">‘</span><span style="color: #800000">1</span><span style="color: #800000">‘</span>:  <span style="color: #008000">#</span><span style="color: #008000"> 第一次查询的时候返回的页码是第一页，这时候做全量查询，但是只返回一部分数据和所有的页码，之后每次查询都只查询一部分，但是如果又翻回第一页就只能陪绑了</span>
  6.             <span style="color: #0000ff">return</span> jsonify({<span style="color: #800000">"</span><span style="color: #800000">result_table</span><span style="color: #800000">"</span>: result, <span style="color: #800000">‘</span><span style="color: #800000">length</span><span style="color: #800000">‘</span>: length})  <span style="color: #008000">#</span><span style="color: #008000"> 是第一页就更新js的length变量，否则就不更新</span>
  7.         <span style="color: #0000ff">else</span><span style="color: #000000">:
  8.             </span><span style="color: #0000ff">return</span> jsonify({<span style="color: #800000">"</span><span style="color: #800000">result_table</span><span style="color: #800000">"</span>: result, <span style="color: #800000">‘</span><span style="color: #800000">length</span><span style="color: #800000">‘</span>: 0})<span style="color: #008000">#</span><span style="color: #008000">这个length就约定为0，如果是0前端js就不会更新length</span>

　　2、处理对象

　　向调用的对象传递页码，如果是第一页还要一些特殊的处理，得到页数并只输出第一页

  1.     <span style="color: #0000ff">def</span><span style="color: #000000"> process(self):
  2.         </span><span style="color: #008000">#</span><span style="color: #008000">其他处理语句</span>
  3.         page_interval = session[<span style="color: #800000">‘</span><span style="color: #800000">page_interval</span><span style="color: #800000">‘</span>]<span style="color: #008000">#</span><span style="color: #008000">获取每页间隔</span>
  4.         <span style="color: #008000">#</span><span style="color: #008000">分页返回结果</span>
  5.         <span style="color: #0000ff">if</span> self.page == 1:  <span style="color: #008000">#</span><span style="color: #008000"> 第一次查询，返回全量</span>
  6.             AccountListProcess_obj = AccountListProcess(account_id = account_id, fb_account =<span style="color: #000000"> fb_account,
  7.                                                         db_conn </span>=<span style="color: #000000"> db_conn)
  8.             result </span>=<span style="color: #000000"> AccountListProcess_obj.process()
  9.             </span><span style="color: #008000">#</span><span style="color: #008000">计算总页数</span>
  10.             <span style="color: #0000ff">if</span> len(result) % page_interval == 0:<span style="color: #008000">#</span><span style="color: #008000">如果正好是间隔的整数倍条数据</span>
  11.                 page_length = len(result) /<span style="color: #000000"> page_interval
  12.             </span><span style="color: #0000ff">else</span><span style="color: #000000">:
  13.                 page_length </span>= len(result) / page_interval + 1
  14.             <span style="color: #0000ff">if</span> page_length == 0:<span style="color: #008000">#</span><span style="color: #008000">如果不足一页最少也是一页</span>
  15.                 page_length = 1
  16.             <span style="color: #0000ff">return</span><span style="color: #000000"> (result[0:page_interval], page_length)
  17.         </span><span style="color: #0000ff">else</span><span style="color: #000000">:
  18.             AccountListProcess_obj </span>= AccountListProcess(account_id=account_id, fb_account=<span style="color: #000000">fb_account,
  19.                                                         db_conn</span>=db_conn, page=<span style="color: #000000">self.page)
  20.             result </span>=<span style="color: #000000"> AccountListProcess_obj.process()
  21.             </span><span style="color: #0000ff">return</span> (result, 0)  <span style="color: #008000">#</span><span style="color: #008000"> 第二个随便了</span>

　　3、调用的对象

　　先拼接数据库中查询的limit语句，然后在拼接sql语句的时候吧这个语句放到最后

  1.     <span style="color: #0000ff">def</span><span style="color: #000000"> process(self):
  2.         </span><span style="color: #008000">#</span><span style="color: #008000">blah blah blah</span>
  3.         page_interval = session[<span style="color: #800000">‘</span><span style="color: #800000">page_interval</span><span style="color: #800000">‘</span><span style="color: #000000">]
  4.         page_start </span>= self.page *<span style="color: #000000"> page_interval
  5.         </span><span style="color: #0000ff">if</span> self.page ==<span style="color: #000000"> 0:
  6.             page_str </span>= <span style="color: #800000">""</span>
  7.         <span style="color: #0000ff">else</span><span style="color: #000000">:
  8.             page_str </span>= <span style="color: #800000">"</span><span style="color: #800000">limit {page_start},{page_interval}</span><span style="color: #800000">"</span>.format(page_start=page_start,page_interval=<span style="color: #000000">page_interval)
  9.         </span><span style="color: #008000">#</span><span style="color: #008000">blah blah blah</span>
  10.         sql = <span style="color: #800000">‘‘‘</span><span style="color: #800000">
  11.                     blah blah blah {page_str};
  12.                     </span><span style="color: #800000">‘‘‘</span>.format(page_str=<span style="color: #000000">page_str)
  13.         </span><span style="color: #008000">#</span><span style="color: #008000">execute sql and blah blah blah</span>

三、最终结果

　　如图

　　技术分享

如果我有什么做得不对的地方，请各位指出来，反正我也不会改的

Flask添加翻页功能（非sqlalchemy）

标签：使用   否则   code   process   json   实例   value   实例化   视图   

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！