layui table 的排序状态存储在表格容器 dom 元素的 data-sort 和 data-order 属性中,分别记录当前排序字段名和方式("asc"/"desc"),未排序时为空字符串,且该来源始终与实际状态同步。

layui table 的排序状态存在哪儿
layui 的 table 实例本身不直接暴露当前排序字段和方式,但每次点击表头触发排序后,会把状态写入表格容器的 DOM 属性中。关键线索是:data-sort 和 data-order 这两个自定义属性,它们被 layui 自动维护。
你不需要监听 click 事件去手动记录,也不用改源码——直接读取即可。
-
data-sort存的是当前排序字段名(如"username"),未排序时值为""(空字符串) -
data-order存的是当前排序方式,只可能是"asc"或"desc",未排序时值为"" - 这两个属性挂在
table渲染后的容器元素上,通常是div.layui-table-box或你初始化时传入的elem对应的 DOM 节点
怎么安全地获取当前排序字段和方式
最稳妥的方式是通过 table 实例的 config 找到绑定的容器,再读属性。避免硬写选择器或依赖 DOM 结构变化。
var tableIns = table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'username', title: '用户名', sort: true},
{field: 'score', title: '分数', sort: true}
]]
});
// 获取当前排序状态
var sortField = tableIns.config.elem.attr('data-sort') || '';
var sortOrder = tableIns.config.elem.attr('data-order') || '';
console.log(sortField, sortOrder); // 如:'score', 'desc'
- 必须确保
tableIns已成功渲染(即render回调已执行或使用done回调) -
tableIns.config.elem是 jQuery 对象(layui 2.x 默认依赖 jQuery),所以用.attr();若用原生 JS,可写tableIns.config.elem[0].getAttribute('data-sort') - 注意:首次加载、未触发过排序时,两者都是空字符串,不是
undefined
为什么不能用 sort 回调参数直接存?
很多人在 sort 回调里记下 field 和 type,以为这就够了——但这是错觉。这个回调只在用户点击时触发,而实际排序状态可能被其他操作覆盖:
- 调用
table.reload()并传入initSort时,会重置排序状态,但不会再次触发sort回调 - 手动调用
table.sort('score', 'desc')(layui 2.8+ 支持)也不会走sort回调 - 服务端返回数据后,前端重新渲染表格(比如用
data本地模式),sort回调根本不会执行
所以依赖回调参数存状态,大概率在 reload 或 initSort 后失效。读 DOM 属性才是唯一始终同步的来源。
reload 时如何保持或重置排序状态
如果你希望 reload 后维持上次的排序(常见于分页切换),需显式传入 initSort:
table.reload('demo', {
initSort: {
field: sortField,
type: sortOrder
}
});
-
initSort的field和type必须与当前data-sort/data-order一致,否则 UI 和实际请求参数会不匹配 - 如果传了
initSort,layui 会自动更新容器上的data-sort和data-order属性,无需手动 set - 想清空排序?传
initSort: {}或干脆不传,但要注意:不传时 reload 默认沿用上次状态,不是“清空”
DOM 属性是 layui 排序状态的唯一事实来源,绕开它去猜、去缓存、去监听,迟早掉坑里。











