Я работаю с 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 и заставите работать опцию data
, вы сможете вернуться к использованию Ajax. Вероятно аналогичная корневая проблема. См. также Как при использовании Ajax с jQuery DataTables определить, что делать с возвращенными данными?
DataTable Json = поддельный Json или что? Я не вижу определения DataTable Json
Связанный: Расширенные данные из источников javascript - DataTables
@andrewJames, вы должны были опубликовать это как ответ.
Ха - спасибо за заметку. Однако, на мой взгляд, это дублирующий вопрос. Это скорее "SO способ" использовать это как указатель на существующий ответ, а не принимать ответ, который на самом деле не является новым ответом (на мой взгляд). В качестве альтернативы вы могли бы ответить себе, и вы могли бы переместить свое редактирование из своего вопроса в свой собственный ответ.
(Кроме того, принятый ответ здесь не дает никаких объяснений для будущих посетителей. Просто кусок JSON - и даже не массив объектов.)
Формат DataTableJson непригоден для использования, попробуйте что-то вроде этого:
[
['Comparison0', 'Action0', 'Item0', 'Popup0'],
['Comparison1', 'Action1', 'Item1', 'Popup1'],
]
Ваши данные JSON не содержат массив. Datatables ожидает массив массивов или массив объектов. См. документацию по опции data. Массив важен - это то, что DataTables повторяет для вас, чтобы создать каждую строку в таблице. Возможно, вам придется «помочь» DataTables, указав параметр
data
на то, где находится массив в вашем JSON. Например,data: "fakeJson.data
— при условии, что массив находится в"data": [ ... ]
.