How to populate a table with ajax?

Question

JavaScript

Hello! I use the DataTables plugin and using ajax I want to display the table by passing the data in json.

Controller method that returns json:

public string GroupReportPartial()
        {
            using (AcademicProgressDb db = new AcademicProgressDb())
            {
                var query = (from Students in db.Students
                             from StudentsSubjects in db.StudentsSubjects
                             from Subjects in db.Subjects
                             from ControlPeriods in db.ControlPeriods
                             from ControlTypes in db.ControlTypes

                             where
                               Students.RecordBookNumber == StudentsSubjects.StId.ToString()
                             where
                             Subjects.SubjectId == StudentsSubjects.SubjId
                             where
                             ControlPeriods.ControlPeriodId == StudentsSubjects.CtrlPeriodId
                             where
                             ControlTypes.ControlTypeId == StudentsSubjects.CtrlTypeId
                             select new GroupsReportModel
                             {
                                 StudentGroupNumber = Students.GroupNumber,
                                 StudentLastName = Students.LastName,
                                 StudentFirstName = Students.FirstName,
                                 StudentMiddleName = Students.MiddleName,
                                 SubjectName = Subjects.Name,
                                 ControlPeriodName = ControlPeriods.Name,
                                 ControlTypeName = ControlTypes.Name
                             }).ToList();

                return JsonConvert.SerializeObject(query);
            }
        }

Works successfully. As a result I get:

[{
    "StudentGroupNumber": 2012,
    "StudentLastName": "Глобчук",
    "StudentFirstName": "Даниил",
    "StudentMiddleName": "Владимирович",
    "SubjectName": "Иностранный язык",
    "ControlPeriodName": "Второй семестр",
    "ControlTypeName": "Зачет"
  }]

Code in view:

<script type="text/javascript">
    $(document).ready(function () {
       $('#example').DataTable({
           ajax: {
               url: '@Url.Action("GroupReportPartial")',
               type: 'POST',
               dataType: 'json',
               dataSrc: "",
               columns: [
                    { data: "StudentGroupNumber", name:"StudentGroupNumber" },
                    { data: "StudentLastName", name: "StudentLastName" },
                    { data: "StudentFirstName", name: "StudentFirstName" },
                    { data: "StudentMiddleName", name: "StudentMiddleName" },
                    { data: "SubjectName", name: "SubjectName" },
                    { data: "ControlPeriodName", name: "ControlPeriodName" },
                    { data: "ControlTypeName", name: "ControlTypeName" }
               ]
            }
        });
    });
</script>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>StudentGroupNumber</th>
            <th>StudentLastName</th>
            <th>StudentFirstName</th>
            <th>StudentMiddleName.</th>
            <th>SubjectName</th>
            <th>ControlPeriodName</th>
            <th>ControlTypeName</th>
        </tr>
    </thead>
</table>

It would seem that everything is fine, but I get an error

DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0

The number of columns in json and in view is the same. What could be the reason?

Answer 1

so stop, shouldn't the columns field be outside the ajax field. something like this:

ajax: 
{
// параметры запроса 
 },
columns: 
[ {
// параметры столбца.
}, { } ... ]

I also suggest moving the headers to the column parameters
but that, as they say, is up to you.

Answer 2

Just in case, I checked the examples here and here and still did not find the second parameter "name" there, like you

{ data: "StudentGroupNumber", name:"StudentGroupNumber" },

And I usually add <tbody></tbody>, it's more reliable)