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("沒有取得數據");
            }
        })
    }

　　二、翻頁函數

　　翻頁使用按鈕來翻頁，按鈕按下直接執行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;
        }
    }

　　三、總頁數

　　總頁數這個是後端在第一次查詢數據的時候全量查詢數據，而後計算出來的，這樣後邊每次翻頁只要查詢翻頁範圍內的數據就行，而不用得到，前面的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);
        }//刪除原來的結果
    }

2、後端

　　後端就見仁見智了，個人程序是view函數先將變量傳到相應的數據處理對象格式化數據，而後調用其餘對象從數據庫查詢，這樣在就分爲view，處理對象，調用類 三個方面來處理

　　一、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

　　二、處理對象

　　向調用的對象傳遞頁碼，若是是第一頁還要一些特殊的處理，獲得頁數並只輸出第一頁

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)  # 第二個隨便了

　　三、調用的對象

　　先拼接數據庫中查詢的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)

3、最終結果

　　如圖

　　

若是我有什麼作得不對的地方，請各位指出來，反正我也不會改的