Layui表格sort字段配置不生效的直接原因是:列启用了templet但未在模板中手动添加与field值一致的data-field属性,导致Layui无法识别列映射关系;正确做法是在templet生成的HTML中显式写入data-field="xxx",且值严格匹配field。
layui table 的 sort 字段配置不生效?
直接结论:layui 表格默认对所有字段启用排序,但可以通过列配置中的 sort 属性设为 false 关闭单个字段的排序能力——前提是该列没同时设置 templet 或自定义事件干扰了原生排序逻辑。
常见错误现象是写了 sort: false 却依然能点击排序,或者控制台报 Uncaught TypeError: Cannot read property 'field' of undefined。这通常是因为你用了 templet 但没同步处理 data-field 属性,导致 Layui 内部无法识别列与数据字段的映射关系。
-
sort: false必须写在对应列(cols数组中某一项)的配置对象里,不是表格整体配置 - 如果该列用了
templet,务必确保模板生成的<td>元素带有data-field="xxx",且值与列的field一致 - 不要在
templet里手动绑定click事件去触发排序,会和 Layui 原生排序冲突
禁用排序时 field 和 data-field 必须严格匹配
Layui 排序依赖 DOM 上的 data-field 属性定位列,而不是靠渲染顺序或文本内容。一旦用了 templet,这个属性不会自动带上,必须手写。
例如,你想禁用“操作”列排序,但又需要自定义按钮:
{field: 'id', title: 'ID', sort: true},
{field: 'name', title: '姓名', sort: true},
{field: 'action', title: '操作', sort: false, templet: function(d){
return '<div data-field="action"><button class="layui-btn layui-btn-xs">编辑</button></div>';
}}
注意:上面模板里 <div data-field="action"> 这行不能少,且 "action" 必须和列的 field 完全一致(包括大小写)。否则 Layui 点击时找不到对应字段,可能跳到别的列上排序,甚至报错。
使用 unshift 或 push 动态加列后,sort: false 失效?
动态修改 cols 数组后调用 table.reload(),新列的 sort: false 有时不生效——本质是 Layui 在重绘时没重新解析列配置的 sort 属性,尤其当列数组被直接替换而非深拷贝时。
- 避免直接赋值
table.config.cols = newCols,改用table.reload({ cols: [ [...newCols] ] }) - 确保
newCols是全新对象,不要复用已有列配置对象(避免引用污染) - 如果列里含函数(如
templet),必须确保每次 reload 都传入相同引用,否则 Layui 可能忽略该列的sort设置
兼容性提醒:Layui 2.8+ 和早期版本的 sort 行为差异
Layui 2.7.x 默认开启所有列排序,sort: false 能彻底禁用;但 2.6.x 及更早版本中,即使设为 false,点击列头仍会触发一次空排序(返回原始顺序),属于已知行为,不是 bug。
如果你维护老项目,别指望 sort: false 在 2.5.1 下完全静默——最稳妥的方式是配合 CSS 隐藏排序图标,并阻止默认事件:
{field: 'status', title: '状态', sort: false, unresize: true, style: 'cursor: default;'}
再加一行样式:.layui-table-box .layui-table-header th[data-field="status"] .layui-table-sort { display: none; }。这样用户点不到、也看不到排序提示,实际效果等同于禁用。
真正容易被忽略的是:禁用排序不等于禁用列交互。如果列里有按钮或链接,记得检查是否因 sort: false 导致事件委托失效——因为 Layui 会把某些事件绑定在带 data-field 的父容器上,而你删了它,事件就丢了。

















