Flask添加翻页功能（非sqlalchemy）

Posted 2020-09-23 巫谢

最近做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)

三、最终结果

　　如图

　　

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