2021-02-03 layui 数据表格 实现全局排序

layui 数据表格在展示数据时 虽然感觉样式不是很好看，但是他的各种功能做的感觉还是比较完善，包括可以兼容在各种分辨率 下显示完整的数据，排序等等。
在table的表头参数里加上sort ：true，就回开启排序，但是这种排序只是按照该字段的升序或者降序的顺序 将当前页的数据进行分页，点击某字段的排序时，layui只会将当前页的数据进行排序，这肯定是不满足需求的，需要在点击某字段的排序时，可以将查询的所有数据进行排序。

• 1 首先需要在表头加上这些排序按钮，在需要进行排序的 表头参数里加上sort ：true

 layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'    //html中table的id为test
    ,url:'/demo/table/user/'
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'score', width:80, title: '评分', sort: true}
      ,{field:'classify', width:80, title: '职业'}
      ,{field:'wealth', width:135, title: '财富', sort: true}
    ]]
    ,page: true
  });
});

• 2 需要监听排序事件，当点击某个字段的升序或者降序按钮时 对数据进行处理。

<div>
<table id="test" lay-filter="test01"  >  </table>
</div>
<script>

table.on('sort(test01)', 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('testTable', { //testTable是表格容器id
				    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
				    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
				      field: obj.field //排序字段 对应的表头参数的filed值，
				      ,order: obj.type //排序方式  desc||asc
				    }
				  });
				});
//我们只需要在向后端查询数据发参数时携带上排序字段和排序规则（desc||asc），后端接收一下排序字段并组织到查询数据的sql里，这样就可以实现对数据的全局排序了，在一开始的时候需要初始胡排序字段，我们需要对initSort：obj 的obj对象进行一下初始化，格式为{field：’id‘，type：’desc‘}，这样的话可以默认为按照id降序排列；
</script>

• 3 如果我们表头参数里field的值与字段不同名

我们可以加一个对象或者map来存储 layui 数据表格 filed 的值与数据库的表字段的属性名，比如数据表格的某一列 field值为 name，表字段的属性名为uname，存储name 与uname的对应关系，在发送参数的时候进行一下转换就可以了。

var dic = {name: 'uname' };//定义好表格field 与数据库表字段的属性名的对应关系。

where :{
   field: dic[obj.field] ,//排序字段 对应的表头参数的filed值，
   order: obj.type //排序方式  desc||asc
}
//在发送参数时取field对应的表字段发送到后端就可以了。