datatableプラグインを使用してローカルjsonデータをロードしました。私はキーワードデータを使用してjsonデータを初期化しましたが、まだそのデータをテーブルtrに操作していません。私のコードはjsfiddleリンクにあります。jqueryでローカルjsonデータをdatatableプラグインにロードする方法
check this fiddle link : <a href="https://jsfiddle.net/qatrasjg/">fiddle </a> jsfiddle.net/qatrasjg
問題は「カテゴリ」プロパティです。これは配列です。
可能な回避策は、あなたのオブジェクト「json.documentAll.document」は配列に変換し、次のコードのようにそれを使用することです：
var json = {
"category": [{
"title": "Customer Satisfaction",
"id": "nnanet:category/certified-pre-owned",
"items": [{
"title": "Bulletins",
"id": "nnanet:category/customer-satisfaction/bulletins"
},
{
"title": "Consumer Affairs",
"id": "nnanet:category/customer-satisfaction/consumer-affairs",
"threelevelItem": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
},
{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}
]
}, {
"title": "Loyalty",
"id": "nnanet:category/customer-satisfaction/loyalty"
}]
},
{
"title": "Parts",
"id": "nnanet:category/parts",
"items": []
},
{
"title": "Retailer Digital Marketing",
"id": "nnanet:category/retailer-digital-marketing",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi",
"threelevelItem": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
},
{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}
]
},
{
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
},
{
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international",
"threelevelItem": [
{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
},
{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}
]
}]
},
{
"title": "Parts",
"id": "nnanet:category/parts",
"items": []
},
{
"title": "Remarketing",
"id": "nnanet:category/remarketing",
"items": []
},
{
"title": "Finance Today",
"id": "nnanet:category/customer-satisfaction/bulletins/finance-today",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
},
{
"title": "Annual",
"id": "nnanet:category/customer-satisfaction/bulletins/finance-today/revenue/annual",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}
],
"category-favorite": [
{
"title": "Accessories",
"id": "nnanet:category/accessories",
"fav-sub-category": []
},
{
"title": "Customer Satisfaction",
"id": "nnanet:category/customer-satisfaction",
"fav-sub-category": [
{
"title": "TOI",
"id": "nnanet:category/customer-satisfaction/toi"
}
]
}
],
"documentAll": {
"document": [
{
"documentTitle": "DPS DataModel",
"documentUrl": "/content/dam/nnanet/documents/nissan/us/en_us/Dealer Portal Data Model.pdf",
"category": [
"F&i "
],
"publishedDate": "12 August 2016, 08:14 PM",
"lastUpdatedDate": "09 August 2016, 08:13 PM"
},
{
"documentTitle": "Sightly Docx",
"documentUrl": "/content/dam/nnanet/documents/nissan/us/en_us/sightly.docx",
"category": [
"Accessories ",
"General ",
"Parts ",
"Operational readiness "
],
"publishedDate": "10 August 2016, 01:55 PM",
"lastUpdatedDate": "09 August 2016, 01:53 PM"
}
],
"totaldocs": 2
}
};
$(function() {
var data = json.documentAll.document.map(function (val, index) {
return [val.documentTitle, val.category.join(','), val.publishedDate, val.lastUpdatedDate];
});
$('#documentListing-data').DataTable({
data: data,
pageLength: 5,
columnDefs: [{
"targets": [0],
"orderable": true
}, {
"targets": [1, 3],
"orderable": false
}]
});
});<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<table id="documentListing-data" class="table documentList-table">
<thead>
<tr class="document-header">
<th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> Name</th>
<th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> Category</th>
<th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> PublishedDate</th>
<th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> LastUpdated Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>ありがとうございます..その作品は大丈夫です.... – user3222157
fist tdのスパンタグを追加するには？ – user3222157
https://jsfiddle.net/qatrasjg /ここにjsonとdatableプラグインのjsコードがあります – user3222157
明確な言葉遣い、固定されたタイプミス – Prune
スパムタグをどのように追加するのですか？ – user3222157