jQuery 数据表解析 json 不正确
Posted
技术标签:
【中文标题】jQuery 数据表解析 json 不正确【英文标题】:jQuery datatables parsing json incorrectly 【发布时间】:2012-10-02 10:17:57 【问题描述】:我只是在尝试使用以下 json 对象进行查询的数据表示例...
["firstName":"pom",
"lastName":"sdfpom",
"email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave",
"access":null,
"id":1,
"firstName":"FirstName",
"lastName":"LastName",
"email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username",
"access":null,
"id":2]
这是在下面的变量数据中返回的...
<script>
$(document).ready(function()
$.getJSON('userManagement/getAllUsers', function(data)
$('#table').dataTable(
"sAjaxSource": data
);
);
);
</script>
<table id="table">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>email</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
现在 JSON 似乎是有效的,当我用它做任何其他事情时,例如在 jquery 中使用它时它工作正常,但数据表根本无法正确呈现。我使用的 javascript 有问题吗?
【问题讨论】:
【参考方案1】:默认情况下,DataTables 将为其数据源处理数组数组:当它必须处理对象数组(如您的情况)时,还有一个额外的步骤。它在插件文档中的this example 中有描述。基本上,您要做的就是添加“列”属性的描述(作为数组):
$('#table').dataTable(
"aaData": data,
"aoColumns": [
"mData": "firstName" ,
"mData": "lastName" ,
"mData": "email" ,
"mData": "password" ,
"mData": "username" ,
"mData": "access" ,
"mData": "id"
]
);
这里有fiddle 来玩。
【讨论】:
这确实显示了表格,但是除了我在 html 中添加的'aaData'
键; sAjaxSource
用于给出返回源 JSON 的 URL。
感谢你的小提琴,我设法返回data = JSON.Parse(result.d); return data;
这是新的dataTables,它不再使用aoColumns
,但仍然在几个小时后解决了胡闹!
你的 json 是一个 object inside 一个数组..
所以不是这个
"sAjaxSource": data
试试这个
"sAjaxSource": data[0]
【讨论】:
这只是显示 html 中的 数据 - 当我完全删除 tBody 数据时,它只显示标题。没有显示我的 JSON 数据。不过感谢您的反馈:) 【参考方案3】:$.ajax(
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
contentType: "application/json; charset=utf-8",
async : false,
success: function (json)
fnCallback(json);
,
complete: function (msg,a,b)
console.log('complete :'+msg)
,
error : function(msg,a,b)
console.log('error:'+msg);
);
async : false 非常重要。这将导致在正确绑定 json 数据之前不呈现页面。
这对我有用。
【讨论】:
【参考方案4】:首先检查您的 json 是否有效或不使用 www.jsonlint.com。
第二次尝试用 aaData 封装您的 JSON 对象,例如:
"aaData" :["firstName":"pom","lastName":"sdfpom","email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave","access":null,"id":1,
"firstName":"FirstName","lastName":"LastName","email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username","access":null,"id":2]
【讨论】:
是的,JSON 是有效的,我无法添加到 JSON,因为它是使用 SpringMVC 从 Jackson 生成的,因此从对象到 JSON 表示的转换是无缝的。 监听生成的json是否和你上面给出的一样,就会报错。 这只是***代码标签的线条渲染,我会格式化它,但它确实会生成有效的JSON以上是关于jQuery 数据表解析 json 不正确的主要内容,如果未能解决你的问题,请参考以下文章
如何正确解析 JSON 文件以通过 JQuery Ajax 方法使用它?
如何:正确使用PHP将数据编码成JSON格式,并通过jquery/ajax请求数据