layui table怎么获取当前排序的字段和排序方式

夜明小哥_3166

夜明小哥_3166

2026-10-16

886人浏览

原创

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

layui table怎么获取当前排序的字段和排序方式

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,以为这就够了——但这是错觉。这个回调只在用户点击时触发,而实际排序状态可能被其他操作覆盖:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 调用 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 排序状态的唯一事实来源,绕开它去猜、去缓存、去监听,迟早掉坑里。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui表格 layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2800

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2633

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

Python uv使用教程
Python uv使用教程

本专题汇总了 Python uv 使用教程与高效使用指南,从 uv 安装配置、常用命令到虚拟环境、依赖管理与项目打包,系统讲解如何用 uv 替代 pip 与 poetry,全面提升 Python 项目开发效率,助你快速上手这一现代化包管理工具,打造干净高效的 Python 工作流。

2026.10.15

0

15

剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

2026.10.14

0

15

剧云AI剧本创作零基础入门
剧云AI剧本创作零基础入门

本专题系统讲解剧云AI剧本创作流程,涵盖灵感、梗概、大纲、分场与正文生成,帮助新手快速完成首个中文剧本项目。

2026.10.14

0

14

VibeKnow文档转视频操作指南
VibeKnow文档转视频操作指南

本专题讲解VibeKnow上传Word、TXT、Markdown等材料生成视频的方法,覆盖内容解析、脚本组织、画面生成与成片检查。

2026.10.14

0

15

VibeKnow知识视频制作与导出详解
VibeKnow知识视频制作与导出详解

本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

2026.10.14

0

13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习