layui表格排序需同时配置sort: true和initSort,列定义中设sort: true,后端参数名固定为field/order,监听sort事件获取obj.field和obj.type,本地排序需手动实现。

layui 表格开启排序需要手动配置 sort 和 initSort
layui 的 table.render() 默认不启用列排序,即使你加了 unresize: true 或点击表头也不会响应。必须显式设置 sort: true,否则 lay-event="sort" 事件根本不会触发。
常见错误是只写了 sort: true 却漏掉 initSort,导致首次加载时无法显示默认排序图标(↑↓)。如果后端已按某字段排好序,又没配 initSort,用户会误以为排序失效。
-
sort: true是开关,必须设为true才允许点击表头触发排序 -
initSort是初始状态,格式为{field: 'price', type: 'desc'},type只能是'asc'或'desc',写成'ASC'或1都无效 - 每列要支持排序,需在
cols中对应列加上sort: true,否则该列表头不可点击
后端排序参数名固定为 field 和 order
layui 发起排序请求时,会自动在 URL 后拼上 ?field=name&order=asc(或 desc),字段名和值都是硬编码,没法改。如果你的后端接口用的是 sortField、direction 这类参数,直接对接会失败。
解决办法只有两个:要么改后端接收逻辑,适配 field/order;要么用 request 重写请求函数,自己拼参。后者更常见,但要注意保留原有分页参数(page、limit)一起发过去。
- 默认参数名不可配置,
where对象里加field或order会被覆盖 -
request函数中必须返回一个包含url和where的对象,where里要手动合并排序 + 分页参数 - 别忘了把
order值从'asc'转成后端需要的'ASC'或1等格式
监听 sort 事件时,obj.field 和 obj.type 才是真实值
表格渲染后,点击表头触发的 sort 事件回调里,参数 obj 包含当前排序字段和方向。很多人误以为 obj.field 是列的 field 值,结果发现是空或错的——其实是列定义里没写 field,或者写了但和后端字段名不一致。
这个 obj.field 就是列配置中 field 的值,obj.type 是 'asc' 或 'desc'(注意小写)。它不经过任何转换,直接拿去拼请求最安全。
- 列定义中
field: 'user_name',那么obj.field就是'user_name',不是'userName' - 如果列用了
templet渲染,只要field写对,排序照样生效 - 不要在
sort回调里直接重载表格(table.reload()),容易造成重复请求;应先更新where,再调用reload()
前端本地排序慎用 data 模式
如果数据量小(比如几百条以内),想纯前端排序,可以关掉 url,用 data 直接传数组,再配合 done 回调里的 table.sort() 手动排序。但这个 table.sort() 不是官方文档公开 API,属于内部方法,layui 升级可能失效。
更稳妥的做法是:用原生 JS 的 Array.prototype.sort() 在 done 里处理 res.data,再用 table.reloadData()(注意不是 reload())刷新视图。不过这会丢失分页状态,需手动维护当前页码。
-
table.sort()第二个参数是排序函数,但文档没写,依赖源码,不建议线上项目使用 - 本地排序时,
initSort仍需配置,否则图标不显示 - 若用了
totalRow,本地排序后合计行不会自动重算,得自己在done里补逻辑
url。配了就发请求,没配就只能靠前端自己搞——但别指望 layui 替你做完整方案。


















