jquery - 数据表 - 无可用数据

Question

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

网页收到json(我已经检查了chrome调试的源代码)，但表格显示“表格中没有可用数据”。

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

{"Data":[{"username":"Testing","totalSteps":1000000,"gender":"男"},{"username":"test","totalSteps":0 ,"性别":"女"},{"用户名":"Testingggg","totalSteps":0,"性别":"女"}]}

位于 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

为什么不使用 dataTables 内置的 AJAX？上面的说法似乎有点倒退了。您的主要问题是 JSON 数组名为 Data (大写 D)。 dataTables 需要数据。您可以通过 dataSrc 属性更改它:

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

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