问题是我有一个Datatable工作得很好,它添加了来自swapi.co API的所有87个星球大战角色,信息有这样的JSON结构:
<http pattern="/security/**" auto-config="true" use-expressions="true" authentication-manager-ref="customAuthenticationManager" >
<intercept-url pattern="/security/SecureLogin.jsp*" access="permitAll" />
<intercept-url pattern="/security/doSecureLogin*" access="permitAll" />
<intercept-url pattern="/security/j_spring_security_check*" access="permitAll" />
<intercept-url pattern="/security/Login.jsp/**" access="permitAll" />
<intercept-url pattern="/security/showCustomPage*" access="hasRole('ROLE_CUSTOM')" />
<intercept-url pattern="/security/**" access="hasRole('ROLE_WELCOME')" />
<form-login
login-page="/security/SecureLogin.jsp"
login-processing-url="/security/j_spring_security_check"
authentication-failure-url="/security/showError.jsp" />
</http>
<http pattern="/api/**" auto-config="true" security="none" />
<authentication-manager alias="customAuthenticationManager">
<authentication-provider ref="customAuthenticationProvider"/>
</authentication-manager>
这非常有效,我这样添加:
{
"count": 87,
"next": "https://swapi.co/api/people/?page=2",
"previous": null,
"results": [
{
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "https://swapi.co/api/planets/1/",
"films": [
"https://swapi.co/api/films/2/",
"https://swapi.co/api/films/6/",
"https://swapi.co/api/films/3/",
"https://swapi.co/api/films/1/",
"https://swapi.co/api/films/7/"
],
"species": [
"https://swapi.co/api/species/1/"
],
"vehicles": [
"https://swapi.co/api/vehicles/14/",
"https://swapi.co/api/vehicles/30/"
],
"starships": [
"https://swapi.co/api/starships/12/",
"https://swapi.co/api/starships/22/"
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "https://swapi.co/api/people/1/"
}
这很好但现在我想选择一行(从数据表中选择一个字符)并从JSON中提取它的url,所以我可以用字符JSON填充另一个数据表,如下所示:
var table = $('#example').DataTable( {
"columns": [
{ "data": "name" },
{ "data": "height" },
{ "data": "hair_color" },
{ "data": "skin_color" },
{ "data": "gender" }
]
} );
$.ajax({
url: 'https://swapi.co/api/people/',
dataType: 'json',
success: function(json){
table.rows.add(json.results).draw();
}
});
除了要将数据添加到数据表中的行外,它一切都很好。这个JSON是这样的:
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data.url+'\'s row' );
$.ajax({
url: data.url,
dataType: 'json',
success: function(json){
tableDos.rows.add(json.name).draw();
}
});
} );
数据表是这样的:
{
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "https://swapi.co/api/planets/1/",
"films": [
"https://swapi.co/api/films/2/",
"https://swapi.co/api/films/6/",
"https://swapi.co/api/films/3/",
"https://swapi.co/api/films/1/",
"https://swapi.co/api/films/7/"
],
"species": [
"https://swapi.co/api/species/1/"
],
"vehicles": [
"https://swapi.co/api/vehicles/14/",
"https://swapi.co/api/vehicles/30/"
],
"starships": [
"https://swapi.co/api/starships/12/",
"https://swapi.co/api/starships/22/"
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "https://swapi.co/api/people/1/"
}
它不起作用,数据表显示此错误http://datatables.net/tn/4
答案 0 :(得分:1)
https://datatables.net/forums/discussion/48819/help-filling-datatable-with-json-from-api
凯文的例子不起作用? http://live.datatables.net/midaqate/1/edit如果凯文无法弄明白 - 不知道还有什么要告诉你的。
对于我的服务器端数据库,我使用了常规的sqli insert方法。发现它更有效率。
答案 1 :(得分:1)
您在ajax中遇到了问题,因为您刚刚在此处添加了OrderByDescending
:name
。
我有几分钟的时间,所以我通过JSFiddle进行了更长时间的观察,这似乎有效:
tableDos.rows.add(json.name).draw();
您添加了一个对象,因此可以使用:$(document).ready(function() {
var table = $('#example').DataTable({
"columns": [{
"title": "Name",
"data": "name"
},
{
"title": "Height",
"data": "height"
},
{
"title": "Hair Colour",
"data": "hair_color"
},
{
"title": "Skin Colour",
"data": "skin_color"
},
{
"title": "Gender",
"data": "gender"
}
]
});
var tableDos = $('#exampleDos').DataTable({
"columns": [{
"title": "Name",
"data": "name"
},
{
"title": "Gender",
"data": "gender"
}
]
});
$.ajax({
url: 'https://swapi.co/api/people/',
dataType: 'json',
success: function(json) {
table.rows.add(json.results).draw();
}
});
$('#example tbody').on('click', 'tr', function() {
var data = table.row(this).data();
console.log(data);
$.ajax({
url: data.url,
dataType: 'json',
success: function(json) {
tableDos.row.add(json).draw();
}
});
});
});
或我使用的方法:tableDos.rows.add([json]).draw();
。
希望有所帮助。