Question

我刚刚开始将dataTable用于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不被解析到表中？

Answer 1

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

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

Answer 2

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

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

演示 - ＆gt;的 http://jsfiddle.net/0f9Ljfjr/952/

dataTables - 没有可用数据

2 个答案: