使用 ajax 调用填充数据表答案

【问题标题】：Populate datatable using ajax call使用 ajax 调用填充数据表
【发布时间】：2020-02-28 12:21:53
【问题描述】：

我正在尝试使用 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

【问题讨论】：

你从console.log('dataaa', data.data)得到什么？
您的列配置看起来不对，您有一个具有三个同名属性的对象，所以您只创建一列？不应该是属性名到列标题的映射吗？
@palaѕн，输出发布在更新的问题中。
@JuanMendes，你能举个例子吗？因为我是这方面的初学者。我应该在那里给哪个属性？

标签： javascript jquery ajax datatable

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如下修改你的代码

 $(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",},
            }]
        })
    })

您可以通过添加过滤或启用搜索来自定义每一列：

{"data": "code","orderable": false, "searchable": false,},

【讨论】：

答案不应该只是发布工作代码，他们应该解释问题是什么

【解决方案3】：

您的列 def 是一个对象，而不是一个对象数组。

每列配置需要一个data字段和一个可选的title。

let data = requestData();

$(() => {
  $("#myTable").DataTable({
    aaData: data['data'],
    columns: [
      { "data" : "id"   , "title": "ID"   },
      { "data" : "name" , "title": "Name" },
      { "data" : "code" , "title": "Code" }
    ]
  })
});

function requestData() {
  return {
    data : [
      { code: "1007", id: 20, name: "a", is_free_zone: true  },
      { code: "1002", id: 15, name: "b", is_free_zone: false },
      { code: "1001", id: 14, name: "c", is_free_zone: false },
      { code: "1003", id: 16, name: "d", is_free_zone: false },
      { code: "1004", id: 17, name: "e", is_free_zone: false },
      { code: "1006", id: 19, name: "f", is_free_zone: false },
      { code: "1005", id: 18, name: "g", is_free_zone: false },
      { code: "1008", id: 21, name: "h", is_free_zone: false },
      { code: "1009", id: 22, name: "i", is_free_zone: false }
    ]
  };
}

#myTable th, #myTable td { padding: 0.33em }
#myTable th { font-size: 0.90em }
#myTable td { font-size: 0.75em }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<div class="table-wrapper">
  <!-- https://datatables.net/examples/styling/bootstrap4 -->
  <table id="myTable" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Code</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

【讨论】：