Я получаю следующую ошибку при попытке загрузить данные DataTables из источника ajax:

DataTables warning: table id=report-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Ниже мой DataTables html:

<table id="report-table" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </tfoot>
</table>

Ниже приведен мой javascript DataTables:

$('#report-table').DataTable({
    "ajax": data,
    "columns": [
        {
            "data": "PageId",
            "orderable": true
        },
        {
            "data": "SchemaName",
            "orderable": false
        },
        {
            "data": "Name",
            "orderable": true
        },
        {
            "data": "LastModified",
            "orderable": true
        },
        {
            "data": "LastModifiedUser",
            "orderable": true
        },
    ],
    "order": [[3, "desc"]]
});

Ниже приведен подтвержденный json, который мой контроллер С# возвращает для данных ajax DataTables:

{
   "data":[
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      },
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      },
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      }
   ]
}

Ошибка, кажется, связана с форматом JSON, но не знаете, что не так?

РЕДАКТИРОВАТЬ:

Добавление полного кода javascript:

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                data: data,
                dataType: 'json',
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        "ajax": data,
                        "columns": [
                            {
                                "data": "PageId",
                                "orderable": true
                            },
                            {
                                "data": "SchemaName",
                                "orderable": false
                            },
                            {
                                "data": "Name",
                                "orderable": true
                            },
                            {
                                "data": "LastModified",
                                "orderable": true
                            },
                            {
                                "data": "LastModifiedUser",
                                "orderable": true
                            },
                        ],
                        "order": [[3, "desc"]]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>
0
OtoNoOto 31 Янв 2022 в 09:58

3 ответа

Источник данных должен быть массивом массивов, содержащих данные в tbody сказать

data = [
["foo","foo","foo","foo","foo"],
["foo","foo","foo","foo","foo"],
["foo","foo","foo","foo","foo"]
];

См. пример [https://datatables.net/examples/data_sources/js_array.html][1]

Кроме того, используйте data: data.data вместо "ajax" : data

0
Ali Al-Omairi 31 Янв 2022 в 10:51
Я заметил это, но считаю, что этот формат отлично работал в других проектах. Я знаю, что мне нужно было объявить данные столбца для свойств. Проблема в том, что Json.NET не сериализует объекты С# как массив массивов. Нет ли другого решения, если вы не можете изменить формат?
 – 
OtoNoOto
31 Янв 2022 в 10:40
Тогда вы просто используете data: data.data вместо "ajax" : data
 – 
Ali Al-Omairi
31 Янв 2022 в 10:48
Обновлено до «данных»: data.data и больше не возникает исходная ошибка. Теперь DataTables просто отображает «Нет доступных данных в таблице» после вызова. Ошибок консоли нет.
 – 
OtoNoOto
31 Янв 2022 в 11:20
«данные»: data.data возвращает неопределенное значение. Проверено, что мой ответ контроллера API возвращает json: "[{\"PageId\":\"foo\",\"SchemaName\":\"foo\",\"Name\":\"foo\",\" LastModified\":\"foo\",\"LastModifiedUser\":\"foo\"}]"
 – 
OtoNoOto
31 Янв 2022 в 11:47

Ваш блок <script> должен выглядеть так, чтобы инициализировать ваши данные для ваших таблиц данных:

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                dataType: "json",
                method: "post",
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        "data":data,
                        "columns": [
                            {
                                "data": "PageId",
                                "orderable": true
                            },
                            {
                                "data": "SchemaName",
                                "orderable": false
                            },
                            {
                                "data": "Name",
                                "orderable": true
                            },
                            {
                                "data": "LastModified",
                                "orderable": true
                            },
                            {
                                "data": "LastModifiedUser",
                                "orderable": true
                            },
                        ],
                        "order": [[3, "desc"]]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>
0
Rahul Sharma 31 Янв 2022 в 12:08