1、先取消数据表格自带的当前页排序 autoSort: false
2、将需要排序的栏加上sort: true,
3、数据表格接口数据调整
1)这里我定义的字段名是orderby
和ordertype
,是全局变量,因为未做查询前接口返回的数据是倒序的,所以我这边给ordertype
默认为20
的字段。
2)方法函数传入两个参数function userlist(orderby,ordertype){}
4、开始layui自带的sort排序方法监听
最初的模板如下:
table.on('sort(filter表格对应名)', function(obj){
table.reload('表格的id名', {
where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
field: obj.field, //排序字段
order: obj.type //排序方式
},
});
});
但接口需要的参数是10、20等。(10创建时间 20-登录次数 30-借书次数 40-借书数量 排序列表)
所以进行了条件判断,如下:
table.on('sort(operation)', function(obj){ //注:sort 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
table.reload('test', {
where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
field: obj.field, //排序字段
order: obj.type //排序方式
},
});
if(obj.field == 'created_at'){
orderby = 10;
}else if(obj.field == 'login_count'){
orderby = 20;
}else if(obj.field == 'borrow_count'){
orderby = 30;
}else if(obj.field == 'borrow_book_count'){
orderby = 40;
}
问题所在 ↓↓↓
if(obj.type== 'desc'){
ordertype = '20';
}else if(obj.type== 'asc'){
ordertype = '10';
}
问题所在 ↑↑↑
userlist(orderby,ordertype); //接口名
});
此时,问题来了:
这个时候排序就会产生问题,每当切换排序时,切换了一次就不会切换了,因为在数据渲染的时候,表格也重新渲染了,导致传的参数会有问题,所以就有了一下:
if(ordertype == '10'){
ordertype = '20';
}else if(ordertype == '20'){
ordertype = '10';
}
如果全局变量ordertype 为10就改为20,反之。