Как заполнить таблицу с помощью ajax?

Question

[Дмитрий Быстров]

Здравствуйте! Использую DataTables плагин и с помощью ajax хочу отобразить таблицу, передав данные в json.

Метод контроллера, который возвращает 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);
            }
        }

Работает успешно. В результате я получаю:

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

Код в представлении:

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

Казалось бы всё хорошо, но получаю ошибку

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

Количество столбцов в json и во view одинаковое. В чем может быть причина?

Answer 1

[Константин Боровик]

так стоп, а разве поле columns не должно находиться за пределами поля ajax. как-то так:

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

также предлагаю заголовки перенести в параметры столбцов

columns: [ { title: "StudentGroupNumber", ... }, ... ]

но это, как говориться, на ваш вкус.

Comments

[Дмитрий Быстров]

Да, всё верно. Проблема была в том, что поле columns было внутри поля ajax. Благодарю.

Если я перенесу заголовки в параметры столбцов, то мне не понадобиться прописывать их в разметке? То есть я смогу убрать <thead></thead> ?

[Константин Боровик]

Дмитрий Быстров, да, всё верно. насколько я знаю thead лучше прописать, равно как и tbody (во всяком случае я всегда так делаю), хотя вы всегда можете поэкспериментировать =) всё остальное сделает плагин.

Answer 2

[eRKa]

На всякий случай проверил примеры здесь и здесь и все таки не нашел там второго параметра "name" как у Вас

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

И я обычно добавляю <tbody></tbody>, так надежнее)