Как получить данные DataTable для загрузки моего JSON без вызова AJAX?

Я работаю с DataTables, пытаясь загрузить данные json. HTML отображается нормально, но я не могу отобразить какие-либо данные. Оперативные данные не работали, поэтому я создал строку для имитации возврата. Я не делаю вызов Ajax для получения данных, я вызываю конечную точку в С# и передаю полученную строку json в JS. Я не получаю никаких ошибок в консоли. Если вам интересно, почему я не использую Ajax, я скажу, что не знаю. :-)

Мы только что скачали DataTables, так что это последняя версия, а проект — .Net Framework 4.6.1.

Вот мой Json:

    var fakeJson =
         {
             "data":
             {
                 "Triggers": {
                     "TriggerTypeId": 2,
                     "TriggeredKeyId1": 499,
                     "TriggerHelpText": "Blah blah blah",
                     "TriggerActionDefinitionID": 2,
                     "ComparisonOperatorID": 1
                 },
                 "Action": {
                     "TaDescription":"this is an action description"
                 },
                 "Protocols": {
                     "protocolDescription": "this is a protocol description"
                 },
                 "Operators": {
                     "CODisplayText": "="
                 }
             }
         };

и вот мой JS:

         var dataSource = <%= DataTableJson %>;
         dataString = JSON.stringify(dataSource);
         dataSource = JSON.parse(dataString);

         console.log(fakeJson.data.Triggers.TriggerHelpText);

        var editor = new $.fn.dataTable.Editor({
            table: '#ProtocolTriggerTable',
            "data": fakeJson
            },

            fields: [{
                label: "Comparison",
                name: "data.Operators.CODisplayText",
                //type: "select"
             }, {
                label: "Action",
                name: "data.Action.TaDescription",
                //type: "select"
            }, {
                label: "Item",
                name: "data.Protocols.protocolDescription",
                //type: "select"
            }, {
                label: "Pop-up Text",
                    name: "data.Triggers.TriggerHelpText",
                //type: "select"
            }]
        });

         $('#ProtocolTriggerTable').DataTable({
             dom: "rt",
             data: fakeJson,
             columns: [
                 { data: "data.Operators.CODisplayText" },
                 { data: "data.Action.TaDescription" },
                 { data: "data.Protocols.protocolDescription" },
                 { data: "data.Triggers.TriggerHelpText" }
             ],

         });

и HTML

<table border="1" id="ProtocolTriggerTable" class="display" style="background-color: #e0e0e0; width:100%;">
    <thead>
        <tr>
            <th style="width:20px !important"></th> 
            <th>Comparison</th>
            <th>Action</th>
            <th>Item</th>
            <th>Pop-up Text</th>
        </tr>
    </thead>
</table>

Дополнение: основываясь на двух или трех хороших комментариях ниже, вот структура Json, которая, наконец, заработала. Нет, мне просто нужно применить это к моим текущим данным.


        var fakeJson =
            [{
                "Triggers": {
                    "TriggerTypeId": 2,
                    "TriggeredKeyId1": 499,
                    "TriggerHelpText": "Blah blah blah",
                    "TriggerActionDefinitionID": 2,
                    "ComparisonOperatorID": 1
                },
                "Action": {
                    "TaDescription": "this is an action description"
                },
                "Protocols": {
                    "protocolDescription": "this is a protocol description"
                },
                "Operators": {
                    "CODisplayText": "="
                }
            }];

Ваши данные JSON не содержат массив. Datatables ожидает массив массивов или массив объектов. См. документацию по опции data. Массив важен - это то, что DataTables повторяет для вас, чтобы создать каждую строку в таблице. Возможно, вам придется «помочь» DataTables, указав параметр data на то, где находится массив в вашем JSON. Например, data: "fakeJson.data — при условии, что массив находится в "data": [ ... ].

andrewJames 21.11.2022 21:17

Я ожидаю, что если вы исправите свой JSON и заставите работать опцию data, вы сможете вернуться к использованию Ajax. Вероятно аналогичная корневая проблема. См. также Как при использовании Ajax с jQuery DataTables определить, что делать с возвращенными данными?

andrewJames 21.11.2022 21:18

DataTable Json = поддельный Json или что? Я не вижу определения DataTable Json

MD Zand 21.11.2022 21:21

@andrewJames, вы должны были опубликовать это как ответ.

USMC6072 21.11.2022 22:14

Ха - спасибо за заметку. Однако, на мой взгляд, это дублирующий вопрос. Это скорее "SO способ" использовать это как указатель на существующий ответ, а не принимать ответ, который на самом деле не является новым ответом (на мой взгляд). В качестве альтернативы вы могли бы ответить себе, и вы могли бы переместить свое редактирование из своего вопроса в свой собственный ответ.

andrewJames 21.11.2022 22:39

(Кроме того, принятый ответ здесь не дает никаких объяснений для будущих посетителей. Просто кусок JSON - и даже не массив объектов.)

andrewJames 21.11.2022 22:40
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
0
7
105
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Формат DataTableJson непригоден для использования, попробуйте что-то вроде этого:

[
    ['Comparison0', 'Action0', 'Item0', 'Popup0'],
    ['Comparison1', 'Action1', 'Item1', 'Popup1'],
]

Другие вопросы по теме