|
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 需要监听排序事件，当点击某个字段的升序或者降序按钮时 对数据进行处理。
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降序排列；
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对应的表字段发送到后端就可以了。
|