关于layui中tablle 渲染数据后 sort排序问题
table.render({ id:'test', elem: '#test' //,height: 350 ,url: "/admin/members/list/" , request: { pageName: 'page' //页码的参数名称,默认:page ,limitName: 'limit' //每页数据量的参数名,默认:limit } ,initSort: { field: 'id' //排序字段,对应 cols 设定的各字段名 ,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 } ,sort:true //重点1:这里的sort表示 table表在取得接口数据后,对页面渲染后的table数据进行排序。同时,这里的true 会影响页面sort 上下小箭头的 显示效果 ,method: 'post' ,page: true ,limit: 10 ,toolbar: '#toolbarDemo' ,cols: [[ {field:'id', title:'ID',fixed: 'left', unresize: true, sort: true, width:70} ,{field:'user_name', title:'员工姓名'} ,{field:'name', title:'部门', sort: true} ,{field:'station', title:'岗位', sort: true} ,{field:'identity_card', title:'身份证',} ,{field:'user_phone', title:'手机号'} ,{field:'add_time', title:'添加时间', width:170} ,{field:'tag', title:'标签',} ,{field:'update_time', title:'必修',toolbar: '#barTs'} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:160} ]] });
由于分页问题,这种排序很多时候不符合项目需求,根据官方文档介绍,可以进行table sort与接口进行交互,从而影响数据 全文排序 效果
table.on('sort(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" console.log(obj.field); //当前排序的字段名 console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序) console.log(this); //当前排序的 th 对象 //尽管我们的 table 自带排序功能,但并没有请求服务端。 //有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如: table.reload('test', { initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数 ,where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式) field: obj.field //排序字段 在接口作为参数字段 field order ,order: obj.type //排序方式 在接口作为参数字段 field order } }); });
以上代码,主要作用是:监听table 表头的事件,获取到sort 排序的字段与排序类型(正序,倒序),把 该参数 传回 接口,并对数据库 进行排序查询。
接口中服务端代码处理:
$param['order_name'] = empty($this->request->post('field')) ?'id':$this->request->post('field'); $param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order');
看下我联系点击三次显示的打印数据的效果
//监听排序 table.on('sort(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" console.log(obj.field); //当前排序的字段名 console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序) console.log(this) //当前排序的 th 对象*/ });
这里还要说一个 layui中 排序的一个操作规则: 如果连续 点击 三下 表头(不是点击 排序的上下小箭头),table排序会有三种排序状态,按顺序分别是 升序、降序、返回点击前 初始状态排序。
在排序的监控事件中 获取到的排序类型 就是上面代码中也写过的
console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
第三次点击,服务端接收的数据 如下
$param['order_name'] = empty($this->request->post('field')) ?'id':$this->request->post('field'); //接到的数据 "name"
$param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order'); //接到的数据 null
所以在 服务端还有加一个判断处理
$param['order_name'] = empty($this->request->post('field')) ?'add_time':$this->request->post('field'); $param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order'); if(empty($this->request->post('order'))){ $param['order_name'] ='id'; //改成 最初始 默认的排序字段 }
当然,table排序还涉及如 table 渲染的显示字段是 name ,则排序需要根据 关联表的id 来排序,也是可以的,
但目前layui 对这块 支持还需要优化下 排序后的页面效果