Layui数据表格开启前端排序切换功能实现Demo

备注

• 分页一般环境下必须得增加排序条件，不然排序可能会出现问题
  
• 采用的前端框架是Layui、后端是SpringBoot、Mybatis、数据库是PostgreSQL
  
• pgsql排序需注意null值
  

1. -- 表示null排在有值行的前面  
2. select * from tbl order by id nulls first;  
3. -- 表示null排在有值行的后面  
4. select * from tbl order by id nulls last;  

复制代码

Layui表格根据对应字段举行切换排序

Layui数据表格官网地址
重要是通过针对Layui表格table的cols列表渲染中的sort属性，以及表格监听sort事件举行实现，后端根据前台通报过来的排序属性和分列方式举行动态切换数据表格的排序方式。
参考官方文档

1. 表格sort事件

表格列表选项渲染

代码实战

1、前端页面代码渲染

HTML

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

复制代码

js

1. //获取本服务对应地址
2. let domainName = window.location.origin;
3. layui.use(['form', 'table', 'util', 'upload', 'laydate','xmSelect'], function (
4.      //表格渲染
5.      Common.layTablePageRender({
6.             elem: '#table',
7.             url: "/guide/core/list",
8.             page: true,
9.             limit: 10,
10.             tableId: 'tableId',
11.             height: "full-255",
12.             toolbar: '#toolBar',
13.             autoSort: false,
14.             cols: [[
15.                 {type: 'checkbox', fixed: 'left'},
16.                 {field: 'name', align: 'center', title: '标题', minWidth: 250},
17.                 //sort开启上线时间日期渲染
18.                 {field: 'declareTime', align: 'center', title: '上线日期', minWidth: 100,sort:true},
19.                 {field: 'createBy', align: 'center', title: '创建人', minWidth: 100},
20.                 {
21.                     field: 'recentOperate',
22.                     align: 'center',
23.                     title: '最近一次操作',
24.                     minWidth: 100,
25.                     templet: function (row) {
26.                         if (row.updateBy) {
27.                             return `${row.updateBy}于${row.updateTime}修改`;
28.                         }
29.                         return '';
30.                     }
31.                 }
32.             ]]
33.         })
34.       
35.         //监听表格排序事件
36.         table.on('sort(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
37.            // obj为表格排序数据
38.           console.log(obj.field); // 当前排序的字段名
39.                   console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
40.                   console.log(this); // 当前排序的 th 对象
42.                   // 尽管我们的 table 自带排序功能，但并没有请求服务端。
43.                   // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
44.            let field = {};
45.            field.sortType = obj.type;
46.            field.sortField = obj.field == 'declareTime' ? 'declare_time' : obj.field;
47.            
48.            table.reload('tableId', {
49.                 page:{
50.                     curr:1
51.                 },
52.                 where: field
53.             })
54.         });
55.          
56. ));
57. //封装的layui表格渲染方法，针对的是若依框架的分页数据渲染方式
58. Common.layTablePageRender= function ({elem,url,page,toolbar,limit,tableId,height,cols,where}){
59.     if (!page) page = true
60.     if (!limit) limit = 10
61.     layui.table.render({
62.         elem: elem,
63.         url: domainName + url,
64.         headers: {"Authorization": 'Bearer ' + localStorage.getItem("access_token")},
65.         request: {
66.             pageName: 'pageNum' //页码的参数名称，默认：page
67.             , limitName: 'pageSize' //每页数据量的参数名，默认：limit
68.         },
69.         toolbar:toolbar,
70.         page: page,
71.         limit: limit,
72.         id: tableId,
73.         height,
74.         cols: cols
75.         , parseData: function (res) { //res 即为原始返回的数据
76.             if (res.code == messageState.success) {
77.                 return {
78.                     "code": 0, //解析接口状态 0-正确码
79.                     "msg": res.msg, //解析提示文本
80.                     "count": res.total, //解析数据长度
81.                     "data": res.rows //解析数据列表
82.                 };
83.             } else if (res.code == messageState.fail) {
84.                 myLayer.Alert('加载失败！');
85.                 return false;
86.             } else {
87.                 myLayer.Alert(res.msg, function () {
88.                     messageState.timeoutToLogin();
89.                 });
90.                 return false;
91.             }
92.         },where:where
93.     });
94. }

复制代码

后台代码

1. //controller
2.            /**
3.      * 查询指南列表
4.      */
5.     @PreAuthorize("@ss.hasPermi('guide:core:list')")
6.     @ApiOperation("查询列表")
7.     @GetMapping("/list")
8.     public TableDataInfo list(Integer pageNum,Integer pageSize,String sortField,String sortType) {
9.         //开启分页
10.         PageHelper.startPage(pageNum, pageSize);
11.         List<BackGuideCoreDetailVo> list = guideCoreService.selectList(sortField,sortType);
12.         return getDataTable(list);
13.     }
14.     //service
15.     List<BackGuideCoreDetailVo> selectList(sortField,sortType);
16.     //service实现类
17.      @Override
18.     public List<BackGuideCoreDetailVo> selectList(sortField,sortType) {
19.         List<BackGuideCoreDetailVo> list = guideCoreMapper.selectList(sortField,sortType);
20.         return list;
21.     }
22.     //mapper接口
23.     List<BackGuideCoreDetailVo> selectList(@Param("sortField") String sortField, @Param("sortType") String sortType);           

复制代码

xml

1.    <select id="selectList" resultMap="BackGuideCoreDetailVo">
2.                 select *
3.         from com_user a
4.                 -- 存在需要排序的字段
5.         <if test="sortField!='' and sortField != null">
6.             order by a.${sortField} ${sortType}
7.         </if>
8.         -- 默认排序
9.         <if test="sortField == null">
10.             order by a.update_time desc nulls last,create_time desc
11.         </if>
12.     </select>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。