讲师中心 微信公众号
AI工具推荐 视频效率加速

layui table怎么设置默认按某字段倒序排列

轻枫大大_4367

轻枫大大_4367

发布时间:2026-10-29 08:25:38

|

472人浏览过

|

来源于php中文网

原创

initSort必须为{field:'xxx',type:'desc'}格式,字段名须与cols中某列field完全一致且该列sort:true;服务端分页时需配合autoSort:false及done回调手动sort或reload实现真正排序控制。

layui table怎么设置默认按某字段倒序排列

initSort 必须写成完整对象,字段名和 type 不能错

直接写 initSort: {field: 'score', type: 'desc'} 才生效。写成 initSort: 'score'、initSort: null、漏掉 type 或拼错为 'descending' 都会静默失效。

字段名必须和 cols 中某列的 field 值**完全一致**(包括大小写、下划线),且该列必须设 sort: true。

  • initSort 不是可选参数,不写或格式不对 = 没默认排序
  • 只支持单字段,默认不支持多字段联合排序
  • 如果用 data 数组传数据,initSort 会立刻前端重排;如果用 url 加载,它只在 done 回调执行后对已加载数据起作用

服务端分页下 initSort 看似无效?先确认后端是否干扰了顺序

开了 page: true 时,Layui 默认信任后端返回的数据顺序。如果你的接口 SQL 里写了 ORDER BY score DESC,那 initSort 就只是个视觉提示——它不会二次排序。

想让 initSort 真正控制排序逻辑,有两个选择:

  • 关掉后端 ORDER BY,让 Layui 全权负责前端内存排序(仅适用于小数据量)
  • 保持后端排序,但把 autoSort 设为 false,并在 done 回调里手动调用 table.sort('score', 'desc')

注意:table.sort() 不发请求,只重排当前页已加载的数据;翻页后仍按后端返回顺序,不受影响。

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

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

下载

点击表头后默认排序丢失,这是设计行为,不是 bug

Layui 认为用户主动点过表头,就以用户操作为准,不再回退到 initSort 状态。刷新页面会重置,但点击其他列再点回来,不会自动恢复。

如果每次进入都希望强制回到默认排序,得自己干预:

  • 在 done 回调中记录初始状态,比如 initialSort = {field: 'score', type: 'desc'}
  • 监听 table.on('sort(demo)', function(obj){})
  • 判断 obj.field !== 'score' || obj.type !== 'desc' 时,再调用 table.sort('score', 'desc')
  • 别无条件调用,否则可能触发死循环

想走服务端排序?initSort 只是起点,关键在 sort 事件里 reload

initSort 本身不触发任何请求。真要服务端排序,必须:

  • 设 autoSort: false,禁用前端自动排序
  • 监听 sort 事件,在回调中用 table.reload() 把排序参数传给后端
  • 例如:where: { sortField: obj.field, sortOrder: obj.type }

此时 initSort 的作用只剩初始图标显示和首次 reload 的参数来源——它只是个“默认值占位符”,不是执行器。

热门AI工具

更多
咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2703

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5883

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6850

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6578

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

943

2024.05.22

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

20

2026.10.28

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

0

2026.10.28

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

120

2026.10.22

热门下载

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

精品课程

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

共87课时 | 13.1万人学习

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

共89课时 | 11.4万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn