使用jquery DataTables插件在表中显示数据时出错

Question

我正在尝试使用jquery DataTables插件显示表数据。 如果我使用HTML表格元素获取数据然后循环数据并最终使用单个DataTables调用它生成标记。 我在说这个

<table id="students" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Roll No</th>
            <th>Result</th>
            <th>Delete</th>
        </tr>           
    </thead>
    <tbody>
        @foreach(var student in Model)
        {
            <tr>
                <td>@Html.ActionLink(student.Name, "Edit", "Students", new { id = student.Id }, null)</td>
                <td>@student.RollNo</td>
                <td>@student.Result</td>
                <td>
                    <button data-student-id="@student.Id" class="btn-link js-delete">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

在我的脚本部分

$("#students").DataTable(); //通过撰写本声明

但是如果我尝试使用这种方法生成标记，它就不起作用。 Javascript符合框弹出说“未知参数rollNo”...并且第一行仅在名称列中显示“未定义”，在“删除”列中显示“删除”

<table id="students" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Roll No</th>
            <th>Result</th>
            <th>Delete</th>
        </tr>           
    </thead>
</table>


@section scripts
{
    <script>
        $(document).ready(function () {
            $("#students").DataTable({
                ajax: {
                    url: "/api/students",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "name",
                        render: function (data, type, student) {
                            return "<a href='/students/edit/" + student.id + "'>"
                                + student.name + "</a>";
                        }
                    },
                    {
                        data: "rollNo"
                    },
                    {
                        data: "result"
                    },
                    {
                        data: "id",
                        render: function (data) {
                            return "<button class = 'btn-link js-delete' data-customer-id=" + data +            ">Delete</button";
                        }
                    }
                ]
            });


            $("#students").on("click", ".js-delete", function () {
                var button = $(this);
                bootbox.confirm("Are you sure you want to delete this student?", function (result) {
                    if (result) {
                        $.ajax({
                            url: "/api/students/" + button.attr("data-student-id"),
                            method: "DELETE",
                            success: function () {
                                button.parents("tr").remove();
                            }
                        });
                    }
                });
            });
        });
    </script>
}

这是 Ajax响应的摘录。

我哪里做错了？

Answer 1

您应该在ajax.dataSrc属性中指定一些内容。 默认值为“data”，但您应指定包含数据的属性的名称。 例如，如果ajax响应是这样的：

{'result':[
    {    rollNo: ...
         name: ... 
         ...
    },
    {    rollNo: ...
         name: ... 
         ...
    },
    ...
]}

那么ajax.dataSrc应该是'结果'。

更新：

看到你的ajax回复。 数据键似乎以大写字母开头。 尝试大写columns.data中的第一个字母（区分大小写IIRC）