首页 > 其他分享 >Layui 表格全局排序

Layui 表格全局排序

时间:2023-12-13 11:57:47浏览次数:32  
标签:obj 表格 Layui order field 排序 id page

背景: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
        ]
    }

 

标签:obj,表格,Layui,order,field,排序,id,page
From: https://www.cnblogs.com/daizichuan/p/17898756.html

相关文章

  • 基于DAMON的LRU链表排序 【ChatGPT】
    https://www.kernel.org/doc/html/v6.6/admin-guide/mm/damon/lru_sort.htmlDAMON-basedLRU-listsSortingDAMON-basedLRU-listsSorting(DAMON_LRU_SORT)是一个静态内核模块,旨在用于基于主动和轻量级数据访问模式的(去)优先级排序,以使LRU列表成为更可信赖的数据访问模式源......
  • 提升数据可视化:拖拽编辑自动汇总,树形数据表格展示新方式
    本文由葡萄城技术团队发布。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言树形结构是一种非常常见的数据结构,它由一组以层次关系排列的节点组成。树的结构类似于自然界中的一棵树,树根对应顶层节点,而子节点则分支延伸出来。在树......
  • 拓扑排序模板
    #include<bits/stdc++.h>usingnamespacestd;structtoposort{ vector<vector<int>>e; vector<int>tp,din; intn; toposort(){} toposort(intn){ this->n=n; din.resize(n+1); e.resize(n+1); } voidadd(int......
  • 几种简单的排序算法(js实现)
    排序是日常开发中经常用到的代码,下面是几种常见的排序算法:冒泡排序(BubbleSort)functionbubbleSort(arr){letlen=arr.length;for(leti=0;i<len-1;i++){for(letj=0;j<len-1-i;j++){if(arr[j]>arr[j+1]){......
  • Excel-排序和筛选
    一、排序单条目排序多条目排序【根据订单好、日期进行排序,注意先订单号,再日期】 自定义排序二、筛选 ......
  • ACwing343.排序
    1.Floyd写法:#include<cstring>#include<iostream>#include<algorithm>usingnamespacestd;constintN=26;intn,m;boold[N][N];boolst[N];intcheck(){for(inti=0;i<n;i++)if(d[i][i])re......
  • Excel-表格的设计及打印
    一、表格的边框设置页面布局-----网格线---勾选列印开始----字体栏-----边框【可以直接套用格式进行设置】;绘制边框---选择线型用鼠标进行一行一列的绘制绘制边框网格-----选择区域网格进行设置【取消用shift+鼠标选中】可以根据线型粗细、虚实、颜色等来绘制二、表格的......
  • [LeetCode Hot 100] LeetCode148. 排序链表
    题目描述思路一:堆排序、小顶堆定义一个最小堆将链表的所有节点放入一个最小堆中直接用队列弹出的最小值依次覆盖掉原链表的值方法一:/***Definitionforsingly-linkedlist.*publicclassListNode{*intval;*ListNodenext;*ListNode(){}......
  • 1094. 拼车(差分&堆排序)
    Problem:1094.拼车文章目录题目思路Review差分数组定义区间加法减法更新差分数组:为啥这样更新思路1Code思路2Code题目车上最初有capacity个空座位。车只能向一个方向行驶(也就是说,不允许掉头或改变方向)给定整数capacity和一个数组trips,trip[i]=[numPassengersi,......
  • 对比elment-ui 和vben 前端对表格的封装
    看了这篇文章 优雅的使用element-ui中的table组件,突然顿悟了一些。elment-ui的表格<el-table:data="tableData"><el-table-columnprop="date"label="日期"></el-table-column><el-table-columnprop=&quo......