layui table的toolbar需手动配置按钮并监听tool事件,用table.on('toolbar(filter)', callback)捕获lay-event,调table.reload()时传入obj.config.page.curr、where及initSort等保持状态。
直接在 table.render() 的配置里加 toolbar,值设为一个带按钮的字符串或 dom 节点即可。layui 不会自动绑定点击事件,刷新逻辑得自己写——这点最容易漏掉,结果按钮点了没反应。
常见错误现象:toolbar: '#refreshBtn' 但页面里没定义该 ID 元素;或者写了 toolbar: '<button class="layui-btn">刷新</button>' 却没监听 tool 事件。
toolbar: '<div class="layui-btn-container"><button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="refresh">↻ 刷新</button></div>'
lay-event 的值(这里是 refresh)必须和后续监听的事件名一致table.render() 执行前已存在于页面中,否则渲染失败必须通过 table.on('toolbar(filter)', callback) 监听,而不是给按钮写 onclick——因为 Layui 表格是动态渲染的,原生绑定会失效。
使用场景:点击刷新时,一般要保留当前页码、搜索条件、排序状态。直接调 table.reload() 最稳妥,别手动改 page.curr 或拼 URL。
table.on('toolbar(test)', function(obj){<br> if(obj.event === 'refresh'){<br> table.reload('test', {<br> page: {curr: obj.config.page.curr}, // 保持当前页<br> where: obj.config.where // 保持搜索参数<br> });<br> }<br>});
obj.config 是原始 render 配置的副本,里面存着当前分页、where 参数等关键信息,比手动维护变量更可靠obj.config.where,否则刷新后搜索条件丢了Layui 默认不加载图标字体,↻ 这种 Unicode 符号虽能用,但部分系统/浏览器渲染模糊;想用 <i class="layui-icon"></i> 就必须确保页面已引入 Layui 的 CSS 和字体文件。
性能影响不大,但兼容性容易出问题:老版本 IE 不支持某些 Unicode,而 layui-icon 类依赖 CSS 字体声明。
layui.css,尤其用模块化方式加载时,layui.use(['table', 'icon']) 并不能自动加载图标 CSS↻(↻)比依赖字体更稳,代码里写成 ↻
layui-btn-sm 控制尺寸,避免和表头高度不匹配因为 table.reload() 默认不会继承原实例的排序字段和顺序,除非显式传进去。这是最常被忽略的一环——看着刷新了,点过排序的列又回默认状态。
可结合 obj.config.sort 和 obj.config.order 拿到当前排序信息,再透传给 reload。
table.reload('test', {<br> page: {curr: obj.config.page.curr},<br> where: obj.config.where,<br> initSort: {<br> field: obj.config.sort,<br> type: obj.config.order<br> }<br>});
initSort 是 reload 的关键参数,不是 sort,拼错就无效multiSort: true),obj.config.sort 是数组,需额外处理obj.config 里“抠”出来再塞回去,而不是靠记忆或全局变量。少写一行 initSort,用户就会觉得刷新功能不完整。