一、场景
二、使用
- 1、指定Elem元素重载数据表格
- 2、使用表对象重载数据表格
- 3、两者的区别
三、注意事项

一、场景

根据表格上的某个字段排序，相信这个场景经常用到，Layui也是支持的。说白了就是【表格重载：1-自动化渲染的重载；2-方法级渲染的重载】，我们需要传排序字段、排序方式给后台

Layui官方文档 - 数据表格监听排序切换

二、使用

1、指定Elem元素重载数据表格

使用默认的方式重载表格数据

//禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({elem: '#id',autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增//,… //其它参数省略
});//监听排序事件
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"console.log(obj.field); //当前排序的字段名console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）console.log(this); //当前排序的 th 对象//尽管我们的 table 自带排序功能，但并没有请求服务端。//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：table.reload('idTest', {initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）field: obj.field //排序字段,order: obj.type //排序方式}});layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});

2、使用表对象重载数据表格

在这里使用自定义的表格对象tableObject重载数据

//禁用前端自动排序，以便由服务端直接返回排序好的数据
let tableObject = table.render({elem: '#id',autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增//,… //其它参数省略
});//监听排序事件
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"console.log(obj.field); //当前排序的字段名console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）console.log(this); //当前排序的 th 对象//尽管我们的 table 自带排序功能，但并没有请求服务端。//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：tableObject.reload( {initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）field: obj.field //排序字段,order: obj.type //排序方式}});layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});

3、两者的区别

我描述不太清，大家自己试一下就知道区别了
法 1、方式搜索、排序每次都是从第1页开始，不会保存之前的查询数据
法 2、搜索、排序能够记录你之前的查询信息（比如页数啊什么的）

三、注意事项

1、后端根据前端传过来的排序字段、排序方式参数，处理，把排序数据传给sql。
2、一般来说，排序 和 搜索 是配合使用的，我们需要处理一下参数（合并他们的参数）传给后台
3、如果前端数据不是后台返回的顺序，前端自动排序了，请在table.render({})中加上autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增

Layer数据表格监听排序切换相关推荐

Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...
button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据获取选中数目验证是否全选提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
layer数据表格换行
在使用layer数据表格的时候,默认是不可以换行的.这样显示改动后数据格式为 aa<br>bb就会显示为换行比如我们的字符串是 a<br>b 这样的字符串浏览器 ...
浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）
postMessage 是 html5 引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档.多窗口.跨域消息传递,多用于窗口间数据通信,这也 ...
Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
android 使用广播监听网络切换
在Application中添加以下代码就可以监听网络切换 private BroadcastReceiver mNetworkStateReceiver = new BroadcastReceiver ...
监听平台切换完毕的事件
EditorUserBuildSettings.SwitchActiveBuildTarget可以用脚本来切换平台..EditorUserBuildSettings.activeBuildTarget ...
layui中table监听单元格_layui table表格监听头删除不请求后台
表格js function getTable() { var table = layui.table //表格 var username=$("#username").val(); ...
android 界面切换监听,Android切换页面--setContentView
setContentView 一般切换页面,通过Intent,startActivity可以实现,但系统创建Activity是非常耗时的,如果对切换画面时间有要求,只能用setContentView在 ...
Zookeeper 客户端API调用示例(基本使用，增删改查znode数据，监听znode，其它案例，其它网络参考资料)
9.1 基本使用 org.apache.zookeeper.Zookeeper是客户端入口主类,负责建立与server的会话它提供以下几类主要方法 : 功能描述 create 在本地目录树中创建 ...

Layer数据表格监听排序切换

一、场景

二、使用

1、指定Elem元素重载数据表格

2、使用表对象重载数据表格

3、两者的区别

三、注意事项

Layer数据表格监听排序切换相关推荐

最新文章

热门文章