Layui 表格全局排序

背景:Layui表格默认是当前页排序,不会全局排序。需要手动修改。

layui分页sort只能当前页不能全局排序解决方案_layui排序-CSDN博客

2021-02-03 layui 数据表格 实现全局排序_layui table 排序-CSDN博客

前端表格

<table class="layui-hide" id="mantis" lay-filter="mantis"></table>

首先前端要有排序的设置

table.render(部分)

复制代码
var inst = table.render({
            elem: '#mantis',
            id: 'mantis',
            url: '',
            toolbar: '#toolbar',
            autoSort: true,
            initSort: {
                field: 'time_consuming'
                , type: 'desc'
            },
            cols: [
                [   // 标题栏
                    {field: 'id', title: '编号', width: 80, sort: true, templet: gen_mantis_url, fixed: 'left'},
复制代码

事件绑定

复制代码
table.on('sort(mantis)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
            console.log(this); //当前排序的 th 对象
            table.reload('mantis', {
                initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
                    field: obj.field //排序字段   在接口作为参数字段  field order
                    , order: obj.type //排序方式   在接口作为参数字段  field order
                }
            });
        });
复制代码

后端Flask

复制代码
@app.get('/api/xxx')
def longTime_not_closed_issues():
    order = request.args.get('order')
    page = request.args.get('page', type=int, default=1)
    per_page = request.args.get('per_page', type=int, default=10)
    q = db.session.query(xxx)
    # print(q)
    bug_id = request.args.get('id')
    if bug_id:
        q = q.where(MantisBugTableORM.id == bug_id)
    if order == 'desc':
        q = q.order_by(desc('time_consuming'))
    elif order == 'asc':
        q = q.order_by(asc('time_consuming'))
    count = len(q.all())
    items = q.limit(per_page).offset((page - 1) * per_page).all()return {
        'code': 0,
        'msg': '信息查询成功',
        'count': count,
        'data': [
            { xxx
            } for item in items
        ]
    }
复制代码

 

posted @   你说夕阳很美  阅读(412)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示