Ich bin neu in DataTables/JSON und ich bin in einer Codierung Probleme. Das Problem besteht darin, Dateninformationen von einer Gruppe von Objektgruppen in eine andere zu ziehen. Wenn ich das nicht richtig erkläre, bitte verzeih mir. Ich kann derzeit nur Daten von den "Kurs" -Objekten ziehen, aber nicht die "Schulen". Ich muss Informationen von Schulen in Kurse umwandeln. Der Plan ist nicht die Schule Namen an mehreren Stellen zu setzen, aber in einer Reihe von Objektarrays und die Daten zu ziehen, die benötigt wird, hängt von der ID unter „Kurse“ gegeben> „Schule“DataTables Jquery JSON
JSON txt-Datei Beispiel
{
"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 - Tables
der Plan ist es, die Zahlen zu ergreifen, die gegeben unter „Kurse“ (Daten)> „Schulen“ zu machen, um die Namen der Schulen in Abhängigkeit von der ID-Nummer aufgeführt sind
$(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>
ZUSÄTZLICHE JQUERY Datentabellen Dropdown-Listen auf Basis off Datatable child rows
Meine weitere Aufgabe ist es, die Schulen Informationen über die Drop-Down-Verse die Spalten zu machen. Wenn der Benutzer auf den Kurs klickt, kann er auf das Drop-down-Menü klicken, um zusätzliche Informationen über die Schule zu erhalten. Momentan liest das format (d) nur das erste Objekt courses, aber ich möchte, dass es beide Hauptobjekte wie courses und schools liest und die Schulinformationen abhängig von den IDs rendert. (Ähnlich wie Tim Harker antwortete nur innerhalb der Dropdown-Listen diesmal)
/* 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');
}
});
Schön! Das hilft mir definitiv, in die richtige Richtung zu kommen. Ich habe eine Frage, sind wir in der Lage, zu machen, dass "var source" den Ajax-Aufruf für das Skript enthält, bevor es auf derselben Seite hinzugefügt wird? – programmer12
Ich habe es herausgefunden. Ich schätze Ihre Assistenten! Was ich getan habe, war '$ .getJSON (url, function (data))' 'hinzuzufügen und mein Datatable-Skript darin mit den Funktionsvariablen data mit einem' var source = data' einzufügen. Ich musste es so machen, weil es mir sonst eine Null oder undefiniert gab. Danke – programmer12
Ich habe eine andere Frage. Ich verwende tatsächlich diese Art von DataTables: [https://www.datatables.net/examples/api/row_details.html] und ich bemerkte, dass meine Dropdown-Menüs nicht funktionieren, ich werde versuchen, dieses Problem zu beheben.Aber die wirkliche Frage ist, ob ich die Schulnamen im Dropdown-Bereich hinzufügen möchte, wie würde ich das machen? Auch, wenn es eine bessere Möglichkeit gibt, die JSON TXT-Daten zu integrieren, die es so machen, wie ich es gelöst habe, zögern Sie nicht zu teilen :) Danke! – programmer12