layui数据表格接收json数据规范——一件有意思的json数据“键-值”封装问题

最新推荐文章于 2024-05-15 11:50:30 发布

小白说(๑• . •๑)

最新推荐文章于 2024-05-15 11:50:30 发布

阅读量3.6k

点赞数 3

分类专栏： # layui 文章标签： json 前端

本文链接：https://blog.csdn.net/dongzi_yu/article/details/104458687

版权

layui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前两天使用layui的数据表格，加载显示数据库的数据，可是却出现了数据格式错误：
数据不符合规范
我的json数据封装如下：

{
	"result": 0,  //返回码
	"message": "响应失败？",  //响应提示信息
	"data": [   //对象数据封装
		{
			"id": 1,
			"name": "dz1",
			"age": 23
		}, {
			"id": 2,
			"name": "dz2",
			"age": 20
		}
	]
}

后来我根据页面的提示信息将响应码更改为code：

"code":0  //更改之后的正确响应状态码。

layui这时给我正确的数据响应，如图：
在这里插入图片描述
后来我又修改code的响应码，假设返回数据失败：

"code":-1   //数据返回失败

它又给我报出相同的错误！！！
数据不符合规范
难不成只有成功接收数据没有失败接收数据了？？？
我去查看了一下layui官方文档示例：layui数据表格官方示例

在控制台下找到了数据表格json数据格式：
layui数据表格内置封装字段
然后我对自己封装的json数据做了如下的修改：

{
	"code": 0,  //返回码
	"msg": "响应失败？",  //响应提示信息
	"data": [   //对象数据封装
		{
			"id": 1,
			"name": "dz1",
			"age": 23
		}, {
			"id": 2,
			"name": "dz2",
			"age": 20
		}
	]
}

这次，同样对code进行修改：

“code”：-1  //数据返回失败

这次表格给了我不一样的反馈：
在这里插入图片描述
但是我还发现，表格的分页是禁止操作的状态，没有显示出来：
没有分页条数
仔细一找发现原来我还有count键没有写上：

“count”：2  //返回结果的条数

这次正常了！！！
在这里插入图片描述

下面附上我的页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<title>数据表格</title>
	</head>
	<body>
		<!---数据表格->
		<table id="demo" lay-filter="test"></table>
		
	</body>
	<script src="layui/layui.js"></script>
	<script>
	//使用layui
	layui.use('table', function(){
	  var table = layui.table;
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,height: 312
	    ,url: 'json/data.json' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
	      ,{field: 'name', title: '用户名', width:80}
	      ,{field: 'age', title: '性别', width:80, sort: true}
	    ]]
	  });
	  
	});
	</script>
</html>

json数据格式：data.json

{
	"code": 0,
	"msg": "响应失败？",
	"count":2,
	"data": [
		{
			"id": 1,
			"name": "dz1",
			"age": 23
		}, {
			"id": 2,
			"name": "dz2",
			"age": 20
		}
	]
}

闲来无事可以自己去试试！

小白说(๑• . •๑)

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
6
评论
layui数据表格接收json数据规范——一件有意思的json数据“键-值”封装问题

前两天使用layui的数据表格，加载显示数据库的数据，可是却出现了数据格式错误：我的json数据封装如下：{ "result": 0, //返回码 "message": "响应失败？", //响应提示信息 "data": [ //对象数据封装 { "id": 1, "name": "dz1", "age": 23 }, { "id": 2, ...
复制链接

扫一扫