[英]jQuery DataTable - Displaying data with custom JSON structure
如何使用jQuery Datatable填充自定義JSON數據結構。 我在下面找到解決方案(Datatable默認-JSON結構),在我將“數據”作為主要對象/數組之前,它可以正常工作,但是,我想使用另一個JSON結構(我的JSON結構)。是否可能或我需要堅持使用Datatable默認的JSON結構嗎?我正在使用DataTables 1.10.7。預先感謝您的幫助。
數據表默認-JSON結構
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}
我的JSON結構
[
{
"Date": "12/04/14",
"MeterID": "56",
"BlockID": "12",
"Type": "sure",
"Subtype": "truction",
"Notes": ""
},
{
"Date": "12/04/14",
"MeterID": "3456",
"BlockID": "123456",
"Type": "alism",
"Subtype": "working",
"Notes": "Lorem"
}
]
jQuery Datatable代碼片段
$('#incident').DataTable({
"ajax": "../../data/object.json",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" },
{ "data": "start_date" },
{ "data": "office" },
{ "data": "extn" }
],
"iDisplayLength": 10
})
這是我的方法。
$('#divWorkQueueTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="workQueueTable"></table>');
$('#workQueueTable').DataTable({
"data": requests,
"columns": [{
"title": 'ID',
"data": "ID",
"sWidth": "5%",
"render": function(data) {
return '<a href="javascript:;" onclick="modARBRequest.Load( \'' + data + '\')">' + data + '</a>';
}
}, {
"title": "Project ID",
"data": "ProjectID",
"sWidth": "10%"
}, {
"title": "Phase",
"data": "Phase",
"sWidth": "5%"
}, {
"title": "Project Description",
"data": "Title",
"sWidth": "50%"
}, {
"title": "Date Requested",
"data": "DateRequested",
"sWidth": "10%",
"render": function(data) {
return modCommon.DateToString(data);
}
}, {
"title": "Stage",
"data": "Stage",
"sWidth": "15%"
}, {
"title": "Status",
"data": "Status",
"sWidth": "10%"
}]
});
因此,如果我是您,我將嘗試解決ajax請求並將已解決的數據傳遞到數據表中。 查看您的“數據”行,它們似乎與您的json不對應。 我想念什么嗎?
因此您將需要“ data”:“ Date”,“ data”:“ MeterID”,“ data”:“ BlockID”等內容。
$('#incident').DataTable({
"ajax": "../../data/object.json",
"columns": [
{ "data": "Date" },
{ "data": "MeterID" },
{ "data": "BlockID" },
{ "data": "Type" },
{ "data": "Subtype" },
{ "data": "Notes" }
],
"iDisplayLength": 10
})
閱讀此解決方案 ,它將解決您的查詢。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.