javascript - 使用 ajax 调用填充数据表

问题描述

我正在尝试使用 ajax 调用填充数据表。但它只用来自的最后一个值填充第一列columns。

这是我的代码：

$(document).ready(function() {
  $.ajax({
    url: "http://192.168.2.32:5000/get_all_locations",
    'method': 'GET',
    'contentType': 'application/json'
  }).done(function(data) {
    console.log('dataaa', data);
    $('#myTable').dataTable({
      'aaData': data['data'],
      "columns": [{
        "data": "id",
        "data": "name",
        "data": "code"
      }]
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="myTable" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>Code</th>
    </tr>
  </thead>
</table>

在上图中，id 字段显示代码的值。我该如何解决这个问题？

数据输出

    {…}
    
    StatusCode: true
    
    StatusDescription: "Location details has been pulled successfully."
    
    data: (9) […]
    
    0: Object { code: "1007", id: 20, is_free_zone: true, … }
    
    1: Object { code: "1002", id: 15, is_free_zone: false, … }
    
    2: Object { code: "1001", id: 14, is_free_zone: false, … }
    
    3: Object { code: "1003", id: 16, is_free_zone: false, … }
    
    4: Object { code: "1004", id: 17, is_free_zone: false, … }
    
    5: Object { code: "1006", id: 19, is_free_zone: false, … }
    
    6: Object { code: "1005", id: 18, is_free_zone: false, … }
    
    7: Object { code: "1008", id: 21, is_free_zone: false, … }
    
    8: Object { code: "1009", id: 22, is_free_zone: false, … }
    
    length: 9

标签： javascriptjqueryajaxdatatable

见https://datatables.net/examples/ajax/objects.html

每列应该是一个单独的对象，其数据属性指向记录上的属性名称。

columns: [
    {"data": "id"},
    {"data": "name"},
    {"data": "code"}
]

javascript - 使用 ajax 调用填充数据表

问题描述

解决方案

推荐阅读