Flask+MySQL大数据表格分页显示

1、显示效果

界面主要由两部分完成
顶部搜索栏:按条件传参给后端请求,控制表格数据重载刷新
底部表格:接收后端返回JSON数据,对表格渲染显示
在这里插入图片描述

2、前端传参

前端采用Layui框架渲染,对页码和条数传参给后台做条件查询;
得到后端返回数据,对前端表格进行重载刷新

顶部搜索栏HTML

<div class="layui-col-md12 x-so">
    <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
    <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
    <input type="text" name="keyword" id="keyword" placeholder="搜索关键字" autocomplete="off" class="layui-input">
    <button class="layui-btn" id="serach" data-type="reload"><i class="layui-icon">&#xe615;</i></button>
</div>

表格渲染

var table = layui.table;
table.render({
    elem: '#allData'
    , id: 'allDataTable'
    , height: 400   //容器高度
    , url: '/query' //数据接口
    , method: 'post'
    , where: {
        name: 'test',
        startDate:'',
        endDate: '',
        keyword: ''} // 默认传参 limit,page
    , page: true    //开启分页
    , limits: [10, 50, 100, 500, 1000]  // 显示页数
    , cols: [[      //表头
        {field: 'host', title: 'Host', width: 130, sort: true, fixed: 'left'}
        , {field: 'address', title: '地址', width: 150, sort: true}
        , {field: 'user', title: '用户名', width: 85, sort: true}
        , {field: 'pw', title: '密码', width: 100, sort: true}
        , {field: 'new_user', title: '新增用户', width: 95, sort: true}
        , {field: 'new_pw', title: '新增密码', width: 95, sort: true}
        , {field: 'systemt', title: '系统配置', width: 95, sort: true}
        , {field: 'UpdateTime', title: '更新时间', width: 145, sort: true}
        , {field: 'mark', title: '备注', width: 70, sort: true}
        , {field: 'target', title: '来源', width: 80}
    ]]
});

表格重载

var active = {
    reload: function () {
        var _startDate = $('#start').val();
        var _endDate = $('#end').val();
        var _keyword = $('#keyword').val();

        var index = layer.msg('查询中,请稍等...', {icon: 16, time: false, shade: 0});
        setTimeout(function () {
            table.reload('allDataTable', { // 重载表格
                page: {curr: 1}, // 重新从第一页开始
                where: {
                    startDate: _startDate,
                    endDate: _endDate,
                    keyword: _keyword
                }
            });
            layer.close(index);
        }, 800);
    }
};
$('#serach').on('click', function () {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
});

3、后端接收请求

设定POST请求方式,通过 request.form 接收前端参数
路由共实现两个数据查询的功能(Filter)

1、查询总数
query(db.func.count(table.c.host)).scalar()
2、查询条目明细
dquery(table).filter(rule).limit(limit).offset((int(page) - 1))

根据 Layui 官方默认的JSON数据样式,最终返回格式如下:
{ "code": 0,"msg": "","count": 1000,"data": [{}, {}]}

完整代码:

@app.route('/query', methods=['POST'])
def query():
    form_dict = request.form
    name = form_dict['name']
    limit = form_dict['limit']
    page = form_dict['page']
    startDate = form_dict['startDate']
    endDate = form_dict['endDate']
    keyword = form_dict['keyword']

    data = {"code": 0, "msg": "Successful", }
    try:
        table = all_table[name]
        _count = db.session.query(db.func.count(table.c.host)).scalar()
        # result = db.session.query(table).all()
        # result = db.session.query(table).filter(table.c.address.like('%上海%')).limit(limit).offset((int(page) - 1))

        if keyword == '':
            if startDate == '' or endDate == '':
                rule = table.c.host.like('%.%')
                _count = db.session.query(db.func.count(table.c.host)).scalar()
            else:
                rule = table.c.UpdateTime.between(startDate, endDate)
                _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
        else:
            if startDate == '' or endDate == '':
                rule = or_(table.c.host.like('%' + str(keyword) + '%'),
                           table.c.address.like('%' + str(keyword) + '%'),
                           table.c.user.like('%' + str(keyword) + '%'),
                           table.c.pw.like('%' + str(keyword) + '%'),
                           table.c.new_user.like('%' + str(keyword) + '%'),
                           table.c.new_pw.like('%' + str(keyword) + '%'),
                           table.c.target.like('%' + str(keyword) + '%'),
                           table.c.systemt.like('%' + str(keyword) + '%'),
                           table.c.mark.like('%' + str(keyword) + '%')
                           )
                _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
            else:
                rule = and_(
                    table.c.UpdateTime.between(startDate, endDate),
                    or_(table.c.host.like('%' + str(keyword) + '%'),
                        table.c.address.like('%' + str(keyword) + '%'),
                        table.c.user.like('%' + str(keyword) + '%'),
                        table.c.pw.like('%' + str(keyword) + '%'),
                        table.c.new_user.like('%' + str(keyword) + '%'),
                        table.c.new_pw.like('%' + str(keyword) + '%'),
                        table.c.target.like('%' + str(keyword) + '%'),
                        table.c.systemt.like('%' + str(keyword) + '%'),
                        table.c.mark.like('%' + str(keyword) + '%')
                        )
                )
                _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()

        result = db.session.query(table).filter(rule).limit(limit).offset(int(page) - 1))
        data['count'] = _count
        data['data'] = [x._asdict() for x in result]
        # UpdateTime日期格式化输出
        for i in range(len(data['data'])):
            if data['data'][i]['UpdateTime']:
                data['data'][i]['UpdateTime'] = data['data'][i]['UpdateTime'].strftime("%Y-%m-%d %H:%M:%S")
    except Exception as err:
        data['code'] = 1
        data['msg'] = 'Failed! {}'.format(err)
        
    return jsonify(data)

Tip:
Flask sqlalchemy 映射关联已存在表的两种方法
Table 数据表格官方文档 - layui.table

关于博主

喜欢就点赞 or 赞赏。
3.65元,一年365天继续分享创作!
在这里插入图片描述

  • 4
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
好的,以下是一个使用layui+Python+Flask+MySQL实现的分页代码示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <div class="layui-container"> <table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>地址</th> </tr> </thead> <tbody id="table_data"></tbody> </table> <div id="page"></div> </div> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: 'page', limit: 10, curr: 1, count: 100, jump: function(obj, first){ if(!first){ $.ajax({ url: '/get_data', type: 'POST', dataType: 'json', data: { page: obj.curr, limit: obj.limit }, success: function(data){ if(data.code == 0){ var html = ''; for(var i=0;i<data.data.length;i++){ html += '<tr>'; html += '<td>'+data.data[i].name+'</td>'; html += '<td>'+data.data[i].age+'</td>'; html += '<td>'+data.data[i].gender+'</td>'; html += '<td>'+data.data[i].address+'</td>'; html += '</tr>'; } $('#table_data').html(html); } else{ layer.msg('获取数据失败!'); } }, error: function(){ layer.msg('获取数据失败!'); } }); } } }); }); </script> </body> </html> ``` Python代码: ```python from flask import Flask, render_template, request, jsonify import pymysql app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/get_data', methods=['POST']) def get_data(): page = request.form.get('page', 1, type=int) limit = request.form.get('limit', 10, type=int) offset = (page - 1) * limit conn = pymysql.connect(host='localhost', user='root', password='123456', database='test', charset='utf8') cursor = conn.cursor(pymysql.cursors.DictCursor) cursor.execute('SELECT * FROM users LIMIT %s, %s', (offset, limit)) data = cursor.fetchall() cursor.execute('SELECT COUNT(*) FROM users') count = cursor.fetchone()['COUNT(*)'] cursor.close() conn.close() return jsonify({'code': 0, 'msg': '', 'data': data, 'count': count}) if __name__ == '__main__': app.run(debug=True) ``` 这个示例使用了jQuery和layui库,通过ajax异步获取分页数据。在Python部分,使用了pymysql库连接MySQL数据库,通过分页查询获取数据并返回给前端。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JOSON.

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值