关于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 对这块支持还需要优化下排序后的页面效果

关于layui中tablle 渲染数据后 sort排序问题

猜你喜欢