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

摘要:
layui2.1.1新增参数,where:{//请求参数field:obj.field//排序字段在接口作为参数字段fieldorder,order:obj.type//排序方式在接口作为参数字段fieldorder}});});以上代码,主要作用是:监听table表头的事件,获取到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, 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:'添加时间', 170}
              ,{field:'tag', title:'标签',}
              ,{field:'update_time', title:'必修',toolbar: '#barTs'}
              ,{fixed: 'right', title:'操作', toolbar: '#barDemo', 160}
          ]]
      });

由于分页问题,这种排序很多时候不符合项目需求,根据官方文档介绍,可以进行tablesort与接口进行交互,从而影响数据 全文排序 效果

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');

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

看下我联系点击三次显示的打印数据的效果

 //监听排序
    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排序问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇正则表达式 匹配 占位符JAVA适配器下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

移植Kdump至嵌入式ARM64环境【转】

转自:https://blog.csdn.net/lsy673908720/article/details/90215501 工欲善其事,必先利其器。操作系统崩溃是高级Linux运维工程师很头疼的事情,但也不要害怕,前辈们已经给我们磨了好多把刀,其中有一把叫做Kdump。目前在主流的Linux发行版如Ubuntu、Centos等已经默认安装或者仓库中含有工...

layui 一行多列控件时使用table布局

当使用多列布局时,使用div+css布局感觉代码不好控制,使用table结构清晰,布局简洁,不用写一堆的css来定位,控制大小的。 例子: <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="w...

一文读懂PostgreSQL-12分区表

一、初识分区表 通常情况下,扫描一个大表会很慢。例如,如果一个订单表orders的数据量是50G,统计某个州范围内订单的平均额度,往往会消耗几分钟的时间。 select avg(total_amount) from orders where state_code=1; 如果能够把大表分拆成小表,查询数据的时猴,只扫描数据所属的小表,就能大大降低扫描时间,提...

Linux-c glib库hash表GHashTable介绍

  百度云glib  链接:https://pan.baidu.com/s/1W9qdlMKWRKIFykenTVuWNQ 密码:ol6y hash表是一种提供key-value访问的数据结构,通过指定的key值可以快速的访问到与它相关联的value值。hash表的一种典型用法就是字典,通过单词的首字母能够快速的找到单词。关于hash表的详细介绍请查阅数据...

scope.row中属性值展示

<el-table-column align="center" label="Id" width="95"> <template slot-scope="scope"> {{ scope.$index }} </template> </el-...

Lua常用时间函数

常用时间函数 print(os.time()) --当前系统时间值 1456368102 print(os.date("%Y%m%d",os.time())) --当前系统时间的格式化字符串 20160225 print(os.date("*t"), os.time()) --当前系统时间表 table完整版本: {year=2005, month=...