启用 sort: true 仅显示排序箭头,需监听 sort 事件并手动处理前端重排或后端请求,字段名须严格匹配且校验安全。
直接启用 sort: true 不会自动排序,必须配合事件监听和数据重载才能生效。
列配置里加 sort: true 只是显示箭头
它只控制表头是否出现 ↑ ↓ 图标,不触发任何排序行为。用户点击后,Layui 仅触发 sort 事件,不会自动重排数据或发请求。
- 字段必须有明确的
field值,且与后端字段名/前端数据键名严格一致(大小写、下划线都不能错) - 如果用
data数组加载,sort: true对应列点击后仍需手动调用Array.prototype.sort()处理 - 如果用
url加载,不拦截事件就等于“点了没反应”——Network 面板看不到新请求
table.on('sort(id)') 必须手动处理逻辑
这是真正让排序动起来的关键步骤。监听后拿到 obj.field 和 obj.type,再决定是前端重排还是后端请求。
- 前端排序:对
table.cache["id"]或原始数据做sort(),注意数值列要用parseFloat()转类型,空值 fallback 为0或Infinity - 服务端排序:用
table.reload("id", { where: { field: obj.field, order: obj.type } }),务必带上page: { curr: 1 }重置页码 - 别漏掉
initSort: obj,否则表头图标不更新,用户看不出当前排序状态
常见踩坑点:分页 + 排序 = 数据错乱
最典型的问题是:表格启用了 page: true,但后端接口本身已带 ORDER BY,导致两次排序叠加或冲突。
- 确认后端 SQL 是否含固定
ORDER BY—— 有则关掉,或在前端加autoSort: false - 检查 Network 请求参数:点击排序后,请求 URL 是否带了
field和order?没带说明where没传对 - 用
url加载时,initSort只影响首次渲染后的图标状态,不触发请求;真要默认排序,得在后端接口里做
真正容易被忽略的是:排序字段名必须白名单校验,尤其多字段组合或用户可控输入场景,obj.field 直接拼 SQL 就是注入漏洞。











