layui 数据表格请求接口排序 全部数据排序非当前页排序

1、先取消数据表格自带的当前页排序 autoSort: false
在这里插入图片描述
2、将需要排序的栏加上sort: true,
在这里插入图片描述
3、数据表格接口数据调整
1)这里我定义的字段名是orderbyordertype,是全局变量,因为未做查询前接口返回的数据是倒序的,所以我这边给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,反之。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值