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()">查询</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">当前页0/0</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;

二、后端

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

  1、view

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

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

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

  3、调用的对象

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

    def process(self):
        #blah blah blah
        page_interval = session[‘page_interval‘]
        page_start = self.page * page_interval
        if self.page == 0:
            page_str = ""
        else:
            page_str = "limit {page_start},{page_interval}".format(page_start=page_start,page_interval=page_interval)
        #blah blah blah
        sql = ‘‘‘
                    blah blah blah {page_str};
                    ‘‘‘.format(page_str=page_str)
        #execute sql and blah blah blah

三、最终结果

  如图

  

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

时间: 2024-10-24 20:19:02

Flask添加翻页功能(非sqlalchemy)的相关文章

asp.net GridView 表格之分页显示与翻页功能及自定义翻页页码样式

一.实现分页功能  GridView实现分页只需要在属性框中将AllowPaging(是否在GridView中打开分页功能)设置为true即可 有时打开分页后不显示页码 确保AllowCustomPaging(是否打开对自定义分页的支持)为False即可 二.实现翻页功能  如何点击页码实现翻页呢? 在属性框中事件选择设置PageIndexChanging(在Grid View的当前索引页正在更改事触发)这一事件 后台代码如下 /// <summary> /// 翻页操作 /// 在GridV

【tool】软件测试中翻页功能测试用例设计

翻页功能我们常碰到的一般有以下几个功能: 1.首页.上一页.下一页.尾页. 2.总页数,当前页数 3.指定跳转页 4.指定每页显示条数 当然,有一些是少于多少页,全部以数字的形式显示,多于多少页后,才出现下一页的控件.本文暂且用以上四点来做为通用的用例来设计吧. 对于1翻页链接或按钮的测试,主要要检查的测试点有: 1.有无数据时控件的显示情况 2.在首页时,首页和上一页是否能点击 3.在尾页时,下一页和尾页是否能点击 4.在非首页和非尾页时,四个按钮功能是否正确 5.翻页后,列表中的记录是否仍按

翻页功能的测试用例

翻页功能我们常碰到的一般有以下几个功能:1.首页.上一页.下一页.尾页.2.总页数,当前页数3.指定跳转页4.指定每页显示条数当然,有一些是少于多少页,全部以数字的形式显示,多于多少页后,才出现下一页的控件.本文暂且用以上四点来做为通用的用例来设计吧. 对于1翻页链接或按钮的测试,主要要检查的测试点有:1.有无数据时控件的显示情况2.在首页时,首页和上一页是否能点击3.在尾页时,下一页和尾页是否能点击4.在非首页和非尾页时,四个按钮功能是否正确5.翻页后,列表中的记录是否仍按照指定的排序列进行了

Web测试——翻页功能测试用例

参考:https://wenku.baidu.com/view/e6462707de80d4d8d15a4f1e.html?rec_flag=default&mark_pay_doc=2&mark_rec_page=1&mark_rec_position=5&mark_rec=view_r_1&clear_uda_param=1 翻页功能常用到几个功能: 1.首页.上一页.下一页.尾页. 2.总页数.当前页数 3.指定跳转页 4.指定每页显示条数 1.翻页链接或按钮

搜索功能、翻页功能、输入框的测试用例设计及知识

  搜索功能测试用例设计 搜索功能点进行分解,把测试用例分解为多个测试场景 场景编号 场景描述 预期结果 场景一 页面检查 正确 场景二 默认条件搜索 查询结果正确 场景三 修改可选条件搜索 查询结果正确 场景四 修改输入条件搜索 查询结果正确 场景五 修改区间条件搜索 查询结果正确 场景六 组合可选.输入条件搜索 查询结果正确 场景七 操作后检查搜索条件及查询结果 查询结果正确 场景八 错误.空记录搜索 查询结果为空 测试步骤描述 按照已经分解的测试场景顺序,逐个描述测试场景的测试步骤 测试场

Atitit.pagging &#160;翻页功能解决方案专题 与 目录大纲 v3 r44.docx

Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档   paip.js翻页分页pageing组件.txt1 1.3. ---原理1 1.4. -------lib1 1.1.   翻页的重要意义 技术上,商业上,翻页都是一个非常高频率的功能.. 提升高频功能的效率,可以大力提升项目整体效率.. 效率优化的重要原则就是高频功能效率优化 1.2. Dep废弃文档   paip.js翻页分页pageing组件

jsp实现上一页下一页翻页功能

前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV

jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下提取完成. 看了近一天的源码后,对API的结构,实现方式和思路有了基本的认识,但终因工作量太大放弃了提取的念头,时间所迫转用KenDo的翻页 不过这过程中,对其的API实现有了较深的认识. 这里摘录部分资料 以下是在进行dataTable绑定处理时候可以附加的参数: 属性名称 取值范围 解释 bAu

QTableView和QTableWidget翻页功能实现

主要使用QTableView和QTableWidget中的三个函数实现 QTableView::verticalScrollBar()->setSliderPosition():  //设置当前滑动条的位置 QTableView::verticalScrollBar()->maximum();             //滑动条能移动的最大位置 QTableView::verticalScrollBar()->value();                   //获得当前滑动条的位置