1
私はDataTables/JSONを初めて使用しています。私はコーディングの問題に取り組んでいます。問題は、あるオブジェクトセットのセットから別のオブジェクトアレイにデータ情報をプルしようとしていることです。私がこれを正しく説明していないなら、私を許してください。私は現在、「コース」オブジェクトからデータを取り出すことしかできませんが、「学校」ではデータを取り出すことはできません。学校からの情報をコースに表示する必要があります。複数の場所ではなく、オブジェクト配列の1セットで学校名を入れて、必要とされているデータを取得していない「コース」の下に指定されたidに依存している計画>「学校」DataTables Jquery JSON
JSON TXTファイルの例
{
"courses" : [
{
"course_id" : "1",
"course_title" : "Mathematics",
"school" : [
"1",
"3"
]
"cost" : "$100"
},
{
"course_id" : "2",
"course_title" : "Science",
"school" : [
"2",
"3"
]
"cost" : "$50"
}
],
"schools" : [
{
"school_id" : "1",
"school_name" : "School of Mathematics",
"school_info" : "You will learn more about math in this school",
},
{
"school_id" : "2",
"school_name" : "School of Social Studies",
"school_info" : "You will learn more about geography and how it plays a role in science",
},
{
"school_id" : "3",
"school_name" : "School of Science",
"school_info" : "You will learn more about math and science and how it relates to one another",
}
]
}
jQueryの - のDataTable
計画は、与えられたID番号に応じて、学校の名前をレンダリングするために、「コース」（データ）>「学校」の下にリストされている数字をつかむためにあります
の$(document).ready(function() {
var table = $('#example').DataTable({
"ajax": {
"url": "data/data.txt",
"dataSrc" : "courses"
},
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "course_id"},
{ "data": "course_title"},
{ "data": "cost" },
{ "data": "school" }
],
"order": []
});
HTML
<!-- DataTable Layout -->
<table id="example" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Course ID</th>
<th>Course Title</th>
<th>Cost</th>
<th>Schools</th>
</tr>
</thead>
</table>
ADDITIONAL jQueryののDataTableのドロップダウンオフに基づいてDatatable child rows
私の追加のタスクは、列の詩ドロップダウンの学校情報をレンダリングすることです。したがって、ユーザーがコースをクリックすると、ドロップダウンをクリックして学校に関する追加情報を得ることができます。現在、format (d)は最初のオブジェクトcoursesしか読んでいませんが、coursesとschoolsの両方の主なオブジェクトを読み込み、IDに応じて学校情報を表示します。
/* Formatting function for row details - modify as you need */
function format (d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Course Title:</td>'+
'<td>'+d.course+'</td>'+
'</tr>'+
'<tr>'+
'<td>School:</td>'+
'<td>'+d.schools+'</td>'+
'</tr>'+
'</table>';
}
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
ニース！それは間違いなく正しい方向に向かうのに役立ちます。私は質問を持っているのですが、 'var source'に、同じページにスクリプトの節を追加するajax呼び出しが含まれていますか？ – programmer12
私はそれを理解しました。あなたの助手に感謝します！私がしたのは '$ .getJSON（url、function（data））'を追加し、データ出力可能なスクリプトの中に 'var source = data'を持つ関数の変数データを追加しました。私はそうしなければならなかったのです。ありがとう – programmer12
私は別の質問があります。私は実際にこのタイプのDataTablesを使用しています：[https://www.datatables.net/examples/api/row_details.html]と私のドロップダウンが動作していないことに気づき、私はその問題を修正しようとします。しかし、実際の質問は、ドロップダウン・セクションに学校の名前を追加したいのですが、どうやってそのようにするのでしょうか？ また、JSON txtデータの詩を私が解決した方法を含めるより良い方法があれば、気軽に共有してください:)ありがとう！ – programmer12