layui框架,前台table接收和layui规定不同的json数据并解析展示

layui框架,前台table接收和layui规定不同的json数据并解析展示

1,table组件默认规定的数据格式

在这里插入图片描述

2,完整的写法

在这里插入图片描述
parseDataresponse两个参数一定要同时使用,不然不起效果。其实如果完全按照layui规定的格式来接收json数据完全可以避免这种问题,但是因为是接口嘛,毕竟别人不一定会用这个框架。在这里顺便贴出来layui直接可以接收的数据格式,再贴出来自定义的数据格式。
layui table可以直接解析的数据接口返回状态码

自定义的数据格式

3,附上源码,方便老铁们复制粘贴用

//获取userList数据列表
	table.render({
		elem: '#userList'
		,url: ${ctx}+'/user/query?token='+token //数据接口
		,page: true 						    //开启分页
		,parseData: function(res){
			return{
				"code": res.result_code,//状态码,200或500等等
				"msg": res.msg, 		//解析提示文本,这个后台就定义了一个'result_msg',既可以当消息提示用,也可以当数据集合用,
				//表格是要接收数据用的,所以我就放在了data:后了,但是这里必须要写出来,不然还接收不到数据,就按文档上的写'res.msg'
				"count": res.total,		//总条数
				"data": res.result_msg	//数据列表
			}
		}
		,response: {
			statusName: 'result_code' //规定数据状态的字段名称,默认:code,返回我们自定义的数据状态key值,我这里后台定的是result_code
			,statusCode: 200 		  //规定成功的状态码,layui默认:0,返回我们自定义的成功的数据状态value值,我这里后台定的是200
			//,msgName: 'msg' 		  //规定状态信息的字段名称,默认:msg,返回我们自定义的消息key值,我这里后台没定义
			,countName: 'total'       //规定数据总数的字段名称,默认:count,返回我们自定义的数据总条数key值,我这里后台定义的是total
			,dataName: 'result_msg'   //规定数据列表的字段名称,默认:data,返回我们自定义的json数据集,我这里后台定义的是result_msg
		}
		,cols: [[ //表头
			{type : 'checkbox',fixed: 'left'}
			,{type: 'numbers',title: '序号',width:100}
			,{field: 'userName', title: '用户名称', sort: true}
			,{field: 'age', title: '年龄', sort: true}
			,{field: 'birth', title: '生日', sort: true}
			,{field: 'phone', title: '手机', sort: true}
			,{field: '', title: '操作', toolbar:'#barDemo'}
		]]
	});

版权声明:本文为IShallTasteGraceLife原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。