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)

三、最終結果

　　如圖

　　

如果我有什么做得不對的地方，請各位指出來，反正我也不會改的