数据表 - 无可用数据答案

【问题标题】：dataTables - No data available数据表 - 无可用数据
【发布时间】：2017-07-30 03:11:10
【问题描述】：

我刚刚开始将 dataTables 用于 Web 应用程序，我正在尝试从 json 请求中填充表格。

网页接收到 json（我已在 chrome 调试中查看了源代码），但表格显示“表格中没有可用数据”。

这里是从js的url部分返回的json

{"Data":[{"username":"Testing","totalSteps":1000000,"gender":"Male"},{"username":"test","totalSteps":0,"gender":"Female"},{"username":"Testingggg","totalSteps":0,"gender":"Female"}]}

在UserController中，来自方法GetAllUsers

这里是html：

@{
    ViewBag.Title = "Users - PDC";
}

<div class="container">
    <h1 class="text-center">Users</h1>

    <table id="AllUsers" class="display" cellspacing="0">
        <thead>
            <tr>
                <th>username</th>
                <th>totalSteps</th>
                <th>gender</th>
            </tr>
        </thead>
    </table>
</div>

<script>
    $(document).ready(function () {

        $.ajax({

            url: '@Url.Action("getAllUsers", "User")',
            method: 'get',
            dataType: 'json',
            success: function (data) {

                $('#AllUsers').DataTable({
                    data: data,
                    columns: [

                        { "data": "username" },
                        { "data": "totalSteps" },
                        { "data": "gender" },
                    ]
                });
            }
        });
    });
</script>

为什么我的 json 没有被解析到表格中？

【问题讨论】：

我认为你的响应对象应该有这个数组 [{"username":"Testing","totalSteps":1000000,"gender":"Male"},{"username":"test" ,"totalSteps":0,"gender":"Female"},{"username":"Testingggg","totalSteps":0,"gender":"Female"}] 不是数据作为键。请检查此示例：jsfiddle.net/rp0zw8rm/202

标签： jquery json datatables

【解决方案1】：

为什么不使用内置 AJAX 的 dataTables？以上似乎有点倒退。您的主要问题是 JSON 数组被命名为 Data（大写 D）。 dataTables 需要 data。您可以通过 dataSrc 属性更改它：

$('#AllUsers').DataTable({
  ajax: {
    url: '@Url.Action("getAllUsers", "User")',
    dataSrc: 'Data'
  },
  columns: [
    { "data": "username" },
    { "data": "totalSteps" },
    { "data": "gender" }
  ]
});

演示 -> http://jsfiddle.net/0f9Ljfjr/952/

【讨论】：

【解决方案2】：

我认为你的响应对象应该只有这个数组：

[
{"username":"Testing","totalSteps":1000000,"gender":"Male"}‌,
{"username":"test",‌"totalSteps":0,"gend‌er":"Female"},
{"user‌name":"Testingggg","‌totalSteps":0,"gende‌r":"Female"}
]

不是数据作为键。

请查看此链接： http://jsfiddle.net/rp0zw8rm/202/

【讨论】：

啊，有道理。你知道如何摆脱数据键吗？我正在通过从控制器传递的 json 编码器来实现它。回到我的普通电脑后，我会添加更多信息