Question

问题是我有一个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

Answer 1

https://datatables.net/forums/discussion/48819/help-filling-datatable-with-json-from-api

凯文的例子不起作用？ http://live.datatables.net/midaqate/1/edit

如果凯文无法弄明白 - 不知道还有什么要告诉你的。

对于我的服务器端数据库，我使用了常规的sqli insert方法。发现它更有效率。

Answer 2

您在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();。

希望有所帮助。

使用rows.add将JSON信息添加到Datatable

2 个答案: