Question

   <body>
       <table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Height</th>
            <th>hair_color</th>
            <th>skin_color</th>
            <th>gender</th>

        </tr>
    </thead>

</table>
</body>

这是我的表格HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
$('#example').DataTable( {
ajax: {
    url: 'https://swapi.co/api/people/1/',
    dataSrc: ''
},
 columns: [
    { data: 'name' },
    { data: 'height' },
    { data: 'hair_Color' },
    { data: 'skin_color' },
    { data: 'gender' }

               ]
           } );
      });
   </script>

这是我的脚本。我知道有一些线索关于同样的事情，但我没有运气让它工作，我检查Datatables文档尝试不同的方式，但没有运气，它没有填补表格。 API将此返回给我：

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

这里也是一个小提琴：https://jsfiddle.net/dpq7v6ba/5/

Answer 1

即使您想使用object作为数据源，但您的数据仍然需要存在于需要为数组的属性中，例如：

{
 count:30,
 data:[{...},{...},{...}......]
}

由于你想在屏幕上创建一个列表，你应该在api url中使用将返回多个结果而不是单个结果api的api，即https://swapi.co/api/people/。

默认情况下，此库将从名为“data”...

的属性中读取数据

但是你可以给出“dataSrc”参数指出dataTables库应该从响应json字符串中读取数据的位置，

api的响应是一级JSON对象，数据是“results”属性值的数组。

你在“columns”参数中有一个错误的属性映射，它应该是“hair_color”，而不是“hair_Color”

所以代码将成为：

$(document).ready(function() {
    $('#example').DataTable( {
    ajax: {
        url: 'https://swapi.co/api/people/',
        dataSrc: 'results'
    },
     columns: [
        { data: 'name' },
        { data: 'height' },
        { data: 'hair_color' },
        { data: 'skin_color' },
        { data: 'gender' }

                     ]
              } );
            });

然后它会工作。 JSFiddle example

使用API从JSON填充数据表

1 个答案:

使用API​​从JSON填充数据表

1 个答案:

使用API从JSON填充数据表