无法将 Json 数据与 Jquery 数据表绑定答案

【问题标题】：Not able to bind the Json data with Jquery Data table无法将 Json 数据与 Jquery 数据表绑定
【发布时间】：2020-07-09 04:45:59
【问题描述】：

我有以下从 api 调用获得的 json 数据。

 {   "data": [
        {
            "Id": "123",
            "name": "fgfnnn",
            "postCode": "123-456",
            "Address": "test",
            "street": "test3"
        },
        {
            "Id": "456",
            "name": "gggcgh",
            "postCode": null,
            "Address": null,
            "street": null
        }
    ]
   
}

我正在尝试如下绑定到表 tblHospital 但出现错误。

jQuery('#tblHospital').DataTable({
                    data: JSON.parse(res),
                     columns: [
                       { "data": "name" }
                {
                    "data": "address",
                           
                   "render": function (data, type, full, meta) {
                       return data.Address +  data.street + data.postCode;
                    }
                },
                       ]
                });

有人可以帮忙吗？错误类似于 DataTables 警告：table id=tblHospital - Requested unknown parameter 'name' for row 0, column 0。有关此错误的更多信息，请参阅http://datatables.net/tn/4

【问题讨论】：

标签： jquery datatable

【解决方案1】：

欢迎来到 StackOverflow。

您的数据表选项中有一些配置错误。

首先你的对象格式不正确。您没有在正确的位置关闭或添加逗号。

其次，你写了address，但是你的对象有大写AAddress

第三，你不能在你的渲染函数中使用data.Address，因为它只是单元格的值。您需要获取该行的值（在您的情况下应该是 full.Address）

你可以运行下面的代码，你会看到它的工作。

var data = [{
      "Id": "123",
      "name": "fgfnnn",
      "postCode": "123-456",
      "Address": "test",
      "street": "test3"
    },
    {
      "Id": "456",
      "name": "gggcgh",
      "postCode": null,
      "Address": null,
      "street": null
    }
  ];


$(document).ready(function() {
  $('#tblHospital').DataTable({
    data: data, //Here you'll have to keep JSON.parse(res). I had to change it since my values are in a variable above for this example to work.
    columns: [
    { "data": "name" }, 
    { "data": "Address", 
        "render": function ( data, type, row, meta ) {
        return row.Address + ' ' + row.street + ' ' + row.postCode;
        }
    }
    ]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="tblHospital" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

【讨论】：

【解决方案2】：

尝试使用ajax 而不是data。并在 ajax 中调用 API。

jQuery('#tblHospital').DataTable({
    "ajax": //API call here,
    "columns": [
        { "data": "name" },
        {
             "data": "address",             
             "render": function (data, type, full, meta) {
                           return data.Address +  data.street + data.postCode;
                       }
        },
    ]
});

【讨论】：