javascript - 使用 rows.add 将 JSON 信息添加到数据表

Question

问题是，我有一个运行良好的数据表，它添加了来自 swapi.co API 的所有 87 个星球大战 Angular 色，该信息采用如下 JSON 结构:

  {
"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/"
    }

这工作得很好，我像这样添加它:

   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 中提取其 url，这样我就可以使用与字符 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();

  }
  });

    } );

除了将其添加到数据表的那一行之外，一切都运行得很好。这个 JSON 是这样的:

    {
"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/"
 }

数据表是这样的:

   var tableDos = $('#exampleDos').DataTable( {
    "columns": [
        { "data": "name" },
             { "data": "gender" }


    ]
    } );

它不起作用，数据表显示此错误 http://datatables.net/tn/4

Answer 1

您的 ajax 遇到了问题，因为您只是在此处添加名称:tableDos.rows.add(json.name).draw();。

我有几分钟的空闲时间，所以我通过 JSFiddle 仔细查看了这似乎有效:

$(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();或者，我使用的方法:tableDos.row。 add(json).draw();.

希望有帮助。