Flask添加翻页功能(非sqlalchemy)

Posted 巫谢

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(1)">查询</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">当前页1/{{length}}</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;
    //清空表格
    function del_table(){
        tableNode = document.getElementById("result_table");
        var rowNum = tableNode.rows.length;
        for(j=rowNum-1;j>0;j--){
            tableNode.deleteRow(j);
        }//删除原来的结果
    }

二、后端

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

  1、view

  分页长度在登录时放到session里,session[\'page_interval\']

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

    if form.validate_on_submit():
        page = int(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, page = self.page)
            (result,length) = AccountListProcess_obj.process()
            #计算总页数
            if length % page_interval == 0:#如果正好是间隔的整数倍条数据
                page_length = length / page_interval
            else:
                page_length = length / page_interval + 1
            if page_length == 0:#如果不足一页最少也是一页
                page_length = 1
            return (result, page_length)
        else:
            AccountListProcess_obj = AccountListProcess(account_id=account_id, fb_account=fb_account,
                                                        db_conn=db_conn, page=self.page)
            (result,length) = AccountListProcess_obj.process()
            return (result, length)  # 第二个随便了

  3、调用的对象

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

    def process(self):
        #blah blah blah
        page_interval = session[\'page_interval\']
        page_start = (self.page - 1) * page_interval
        page_str = "limit {page_start},{page_interval}".format(page_start=page_start,page_interval=page_interval)
        #计算总长度
        sql = \'select count(*) from blah blah blah\'
        #blah blah blah
        length = cur.fetchone()[0]            
        #blah blah blah
        sql = \'\'\'
                    blah blah blah {page_str};
                    \'\'\'.format(page_str=page_str)
        #execute sql and blah blah blah
        result = cur.fetchall()
        return (result,length)

三、最终结果

  如图

  

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

以上是关于Flask添加翻页功能(非sqlalchemy)的主要内容,如果未能解决你的问题,请参考以下文章

Flask 学习-12.Flask-SQLAlchemy 连接 mysql 数据库

那些年我们学Flask-SQLAlchemy,实现数据库操作,分页等功能

Flask-16 Using Flask-SQLAlchemy

在添加Flask,SQLAlchemy之前检查表中的行中的值是不是已经存在

python Flask-SQLAlchemy的一个方便的SQL调试功能

PyCharm 解析 - flask.ext.sqlalchemy 与 flask_sqlalchemy