Error in displaying data in tables using jquery DataTables plug-in

Question

I'm trying to display table data using jquery DataTables plug-in. If i get the data using HTML table element and then loop over the data and finally using a single DataTables call it generates the markup. I'm talking about this

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

and in my scripts section

$("#students").DataTable(); // by writing this statement

but it doesn't work if I try to generate the markup using this approach. Javascript conform box pops-up saying "Unknown parameter rollNo" ... and the first row only display "undefined" in name column and "Delete" in Delete column shows

<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>
}

Here's an extract of the Ajax response.

Where am I doing wrong?

Answer 1

You should specify something in the ajax.dataSrc property. The default value is 'data', but you should specify the name of the property that contains the data. For instance, if the ajax response is something like this:

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

then ajax.dataSrc should be 'result'.

UPDATE:

Seen your ajax response. The data keys seem to start with uppercase. Try uppercasing the first letter in columns.data (Is case sensitive IIRC)