后台处理分页问题(直接处理sql结果集)

因为前端用的layui,其中table有个自带的分页功能,但是需要后端数据配合(就是后端需要个分页器),本人现在用tornado,查了很多,发现是模板语法写法,迫不得已自己构建了一个简单分页器,记录一下!

tornado  后端代码:

def pagination(page, limit, total, res):
    '''
    返回切片后的数据
    :param page: 前端页数
    :param limit: 前端分页数据
    :param total: 结果数len(res)
    :param res:sql结果
    :return:
    '''
    # 将传进来的参数转为int值判断大小
    page = int(page)
    limit = int(limit)
    total = int(total)
    # 判断当前页所需数据量是否小于等于总数据数 eg:page*limit<=total  ==> 1*10<=42  第一页十条数据小于等于总数据
    if page * limit <= total:
        # 判断当前是否第一页
        if page == 1:
            # 是第一页则从零取分页的数据量(不一定是一页十条)
            r = res[0: limit * page]
            print('page为1时', len(r), r)
            return r
        elif page == 0:
            # page 在前端传值不可能为0,但避免客户瞎搞,提前预测
            print('页数不能为0')
        else:
            # 取除page=1外的值  eg:page=2,limit=10  ==>res[10*(2-1):10*2] <====>res[10:20]
            # 这样就能取完值,但最后一页需要另外取值
            r = res[limit * (page - 1):limit * page]
            print('page不为1时:', len(r), r)
            return r
    else:
        # 当前页所需数据量大于总数据数则取最后一页的值
        # total_page 可分页数  remainder 余数   若余数大于零则需要在页数加一
        total_page, remainder = divmod(total, limit)
        # 余数大于零,则取列表中最后的几条值
        if remainder > 0:
            # 余数大于零是在可分页数加一,代表最后一页是用来显示余下数据
            total_page += 1
            # total_page:可分页数+1,最后一页是为了显示不足limit的值,当可分页数==前端页数,就取余数值
            if total_page == page:
                print('数据有余数,余数为几则获取几个元素')
                print('total_page+=1', total_page)
                # 余数为几,则取多少条数据
                r = res[-remainder:]
                print(r)
                return r
            else:
                # 否则表示页数超了,前端不会传超出可分页数值,所以此段代码可要可不要
                print('数据只能分' + str(total_page) + '页,您给出:' + str(page))


if __name__ == '__main__':
    a = []
    for i in range(1, 39):
        a.append(i)
    print(a)
    # print(a[-3:])
    b = len(a)
    print(b)
    pagination(6, 10, b, a)

前端代码:(前端代码节选,包含时间、表格、分页、表格重载、下拉框数据、导出为excel文件)

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-right: 0">
                    <div class="layui-input-inline">
                        <!--<input type="text" class="layui-input" id="test25" placeholder="开始时间"-->
                        <input type="text" class="layui-input" id="test25" placeholder="开始时间"
                               style="height: 38px;">
                    </div>
                </div>
                <div class="layui-inline">
                    <a>—</a>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test26" placeholder="结束时间"
                               style="height: 38px;">
                    </div>
                </div>
                <div class="layui-inline" style="width: 640px;">
                    <select id="doors" name="doors" xm-select="select3" xm-select-skin="normal">
                    </select>
                </div>
                <div class="layui-inline">
                    <div class="demoTable">
                        <button class="layui-btn layuiadmin-btn-list" id="select">查询
                        </button>
                        <button class="layui-btn layuiadmin-btn-list" data-type="add" id="export">导出
                        </button>
                    </div>
                </div>
            </div>
            <!--表格-->
            <div class="layui-card-body">
                <table class="layui-hide" id="test"></table>
                <!--lay-filter="test"-->
                <div class="setPageDiv">
                    <div class="Pagination" id="pagination"></div>
                </div>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <span style="padding-left: 50%;font-size: 25px;">刷卡记录</span>
                    </div>
                </script>
            </div>
        </div>
    </div>
</div>



layui.use(['index', 'table', "form", "jquery", "layer", "laydate", "table", "element", 'excel'], function () {
        var $ = layui.jquery
            , table = layui.table
            , layer = layui.layer
            , laydate = layui.laydate
            , admin = layui.admin
            , form = layui.form
            , excel = layui.excel
            , formSelects = layui.formSelects
            , element = layui.element;
        var nowTime = new Date();
        var startTime = laydate.render({
            elem: '#test25',
            type: 'datetime',
            max: 'nowTime',//默认最大值为当前日期
            done: function (value, date) {
                alert(value); //得到日期生成的值,如:2017-08-18
//    	    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                endTime.config.min = {
                    year: date.year,
                    month: date.month - 1,//关键
                    date: date.date,
                    hours: date.hours,
                    minutes: date.minutes,
                    seconds: date.seconds
                };
            }
        });
        var endTime = laydate.render({
            elem: '#test26',
            type: 'datetime',
            max: 'nowTime',
            done: function (value, date) {
                alert(value); //得到日期生成的值,如:2017-08-18
//    	    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                startTime.config.max = {
                    year: date.year,
                    month: date.month - 1,//关键
                    date: date.date,
                    hours: date.hours,
                    minutes: date.minutes,
                    seconds: date.seconds
                }

            }
        });
 //显示表格数据
        table.render({
            elem: '#test'//重载的表格
            , url: 'http://192.168.1.123:8977/get_table' //数据的地址
//            , url: 'http://127.0.0.1:8977/get_table' //数据的地址
            , method: 'post'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, align: 'left'}
                , {field: 'name', title: '事件类型'}
                , {field: 'time', title: '时间', align: 'left'}
                , {field: 'address', title: '地点', sort: true, align: 'left'}
                , {field: 'msg', title: '信息', sort: true, align: 'left'}
            ]] //设置表头
            , page: true
            , limit: 10
            , id: '#tabledata' // 这个ID是干嘛用的??? 按钮 点击搜 好你试一下
            , where: { //设定异步数据接口的额外参数,任意设
                'begintime': $("#test25").val()//获取输入框的值
                , 'endtime': $("#test26").val()//获取输入框的值
                , 'doors': JSON.stringify(formSelects.value('select3', 'val'))//获取输入框的值
            }
        });
        $(document).on('click', '#select', function () {//selectzg id被点击时进入
            //这里以搜索为例
            table.reload('#tabledata', {
                where: { //设定异步数据接口的额外参数,任意设
                    'begintime': $("#test25").val()//获取输入框的值
                    , 'endtime': $("#test26").val()//获取输入框的值
                    , 'doors': JSON.stringify(formSelects.value('select3', 'val'))//获取输入框的值
                }
            });
        });
        //以下代码可以在console中运行测试, 结果查看基础示例第一个
        formSelects.data('select3', 'server', {
//            url: 'http://127.0.0.1:8977/get_select'
            url: 'http://192.168.1.123:8977/get_select'
        });
        //导出
        $('#export').on('click', function () {
            $.ajax({
                url: 'http://192.168.1.123:8977/get_table',
                // url: 'http://127.0.0.1:8977/getdata',
                method: 'post',
                dataType: 'json',
                data: {
                    'begintime': $("#test25").val()//获取输入框的值
                    , 'endtime': $("#test26").val()//获取输入框的值
                    , 'doors': JSON.stringify(formSelects.value('select3', 'val'))//获取输入框的值
                },
                success: function (res) {
                    // 假如返回的 res.data 是需要导出的列表数据
                    console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
                    // 1. 数组头部新增表头
                    res.data.unshift({id: '序号', name: '事件类型', time: '时间', address: '地点', msg: '信息'});
                    // 2. 如果需要调整顺序,请执行梳理函数
                    var data = excel.filterExportData(res.data, [
                        'id',
                        'name',
                        'time',
                        'address',
                        'msg'
                    ]);
                    // 3. 执行导出函数,系统会弹出弹框
                    excel.exportExcel({
                        sheet1: data
                    }, '刷卡记录.xlsx', 'xlsx');
                }
            });
        });

    
    })

页面展示:(10条一页)

页面展示(20条一页)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值