Layui数据表格开启前端排序切换功能实现Demo - IT评测·应用市场-qidao123.com

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

复制代码

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

复制代码

//获取本服务对应地址
let domainName = window.location.origin;
layui.use(['form', 'table', 'util', 'upload', 'laydate','xmSelect'], function (
//表格渲染
Common.layTablePageRender({
elem: '#table',
url: "/guide/core/list",
page: true,
limit: 10,
tableId: 'tableId',
height: "full-255",
toolbar: '#toolBar',
autoSort: false,
cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'name', align: 'center', title: '标题', minWidth: 250},
//sort开启上线时间日期渲染
{field: 'declareTime', align: 'center', title: '上线日期', minWidth: 100,sort:true},
{field: 'createBy', align: 'center', title: '创建人', minWidth: 100},
{
field: 'recentOperate',
align: 'center',
title: '最近一次操作',
minWidth: 100,
templet: function (row) {
if (row.updateBy) {
return `${row.updateBy}于${row.updateTime}修改`;
}
return '';
}
}
]]
})
//监听表格排序事件
table.on('sort(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
// obj为表格排序数据
console.log(obj.field); // 当前排序的字段名
console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); // 当前排序的 th 对象
// 尽管我们的 table 自带排序功能，但并没有请求服务端。
// 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
let field = {};
field.sortType = obj.type;
field.sortField = obj.field == 'declareTime' ? 'declare_time' : obj.field;
table.reload('tableId', {
page:{
curr:1
},
where: field
})
});
));
//封装的layui表格渲染方法，针对的是若依框架的分页数据渲染方式
Common.layTablePageRender= function ({elem,url,page,toolbar,limit,tableId,height,cols,where}){
if (!page) page = true
if (!limit) limit = 10
layui.table.render({
elem: elem,
url: domainName + url,
headers: {"Authorization": 'Bearer ' + localStorage.getItem("access_token")},
request: {
pageName: 'pageNum' //页码的参数名称，默认：page
, limitName: 'pageSize' //每页数据量的参数名，默认：limit
},
toolbar:toolbar,
page: page,
limit: limit,
id: tableId,
height,
cols: cols
, parseData: function (res) { //res 即为原始返回的数据
if (res.code == messageState.success) {
return {
"code": 0, //解析接口状态 0-正确码
"msg": res.msg, //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows //解析数据列表
};
} else if (res.code == messageState.fail) {
myLayer.Alert('加载失败！');
return false;
} else {
myLayer.Alert(res.msg, function () {
messageState.timeoutToLogin();
});
return false;
}
},where:where
});
}

复制代码

//controller
/**
* 查询指南列表
*/
@PreAuthorize("@ss.hasPermi('guide:core:list')")
@ApiOperation("查询列表")
@GetMapping("/list")
public TableDataInfo list(Integer pageNum,Integer pageSize,String sortField,String sortType) {
//开启分页
PageHelper.startPage(pageNum, pageSize);
List<BackGuideCoreDetailVo> list = guideCoreService.selectList(sortField,sortType);
return getDataTable(list);
}
//service
List<BackGuideCoreDetailVo> selectList(sortField,sortType);
//service实现类
@Override
public List<BackGuideCoreDetailVo> selectList(sortField,sortType) {
List<BackGuideCoreDetailVo> list = guideCoreMapper.selectList(sortField,sortType);
return list;
}
//mapper接口
List<BackGuideCoreDetailVo> selectList(@Param("sortField") String sortField, @Param("sortType") String sortType);

复制代码

<select id="selectList" resultMap="BackGuideCoreDetailVo">
select *
from com_user a
-- 存在需要排序的字段
<if test="sortField!='' and sortField != null">
order by a.${sortField} ${sortType}
</if>
-- 默认排序
<if test="sortField == null">
order by a.update_time desc nulls last,create_time desc
</if>
</select>

复制代码