使用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）