Wanting to use DataTables to nest a table within a table...within a table...can it be done? - datatables

Question

I just started using dataTables so I'm hoping this will be a learning opportunity.
I work for a school system and trying to develop a table that will show a student's grades from year to year. I want an administrator to be able to click on any year, and the table will expand to show a child table with the student's GPA for each term (6 terms per school year). Finally, I want the administrator to be able to click on any term and show a child table for actual classes the student took that term and their grade.
I'm able to successfully get the term table to show, but I'm having no luck getting the course table to show. I'm hoping it's not a case of "you can't nest a table within a table within a table", but I can't figure out how to make it stick, although I'm pretty sure it has to do with the "details-control" class...
Here is a link to a fiddle I put together showing what I have...any help finishing it up would be greatly appreciated!!
fiddle me this
var iTermGPACounter = 1;
$(document).ready(function() {
loadDetailsByCourse();
});
function loadDetailsByCourse() {
var table = $('#msGrades').DataTable({
data: [{
"__type": "DMC.WebServices.detailGPA",
"schoolYearLabel": "14-15",
"schoolLevel": "02",
"location": "Highland",
"grade": "7",
"gpaValue": "3.119",
"termGPA": [{
"term": "1",
"gpaValue": "3.857",
"termCourseGrades": [{
"courseNo": "38929712",
"sectionNo": "200",
"courseName": "HEALTH 2",
"letterGrade": "A+",
"department": "EL"
}, {
"courseNo": "32320711",
"sectionNo": "10",
"courseName": "LANG ARTS 2",
"letterGrade": "A+",
"department": "EL"
}, {
"courseNo": "32720711",
"sectionNo": "10",
"courseName": "MATH 2",
"letterGrade": "B",
"department": "MA"
}]
}, {
"term": "2",
"gpaValue": "3.714",
"termCourseGrades": [{
"courseNo": "38929712",
"sectionNo": "200",
"courseName": "HEALTH 2",
"letterGrade": "A",
"department": "EL"
}, {
"courseNo": "32320711",
"sectionNo": "10",
"courseName": "LANG ARTS 2",
"letterGrade": "A",
"department": "EL"
}, {
"courseNo": "32720711",
"sectionNo": "10",
"courseName": "MATH 2",
"letterGrade": "A-",
"department": "MA"
}]
}]
}, {
"__type": "DMC.WebServices.detailGPA",
"schoolYearLabel": "15-16",
"schoolLevel": "02",
"location": "Highland",
"grade": "8",
"gpaValue": "3.123",
"termGPA": [{
"term": "1",
"gpaValue": "3.143",
"termCourseGrades": [{
"courseNo": "32320711",
"sectionNo": "12",
"courseName": "LANG ARTS 2",
"letterGrade": "A",
"department": "EL"
}, {
"courseNo": "32720711",
"sectionNo": "12",
"courseName": "MATH 2",
"letterGrade": "D",
"department": "MA"
}]
}]
}],
paging: false,
columns: [{
className: 'details-control',
orderable: false,
data: null,
defaultContent: '<img src="http://i.imgur.com/SD7Dz.png">'
}, {
data: "schoolYearLabel"
}, {
data: "grade"
}, {
data: "location"
}, {
data: "gpaValue"
}],
order: [
[1, 'asc']
]
});
// Add event listener for opening and closing details
$('#msGrades 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(formatTermGPA(iTermGPACounter)).show();
tr.addClass('shown');
var oInnerTable = $('#termGPA_' + iTermGPACounter).dataTable({
data: row.data().termGPA,
paging: false,
searching: false,
columns: [{
className: 'details-control',
orderable: false,
data: null,
defaultContent: '<img src="http://i.imgur.com/SD7Dz.png">'
}, {
data: "term"
}, {
data: "gpaValue"
}],
order: [
[1, 'asc']
]
});
// Add event listener for opening and closing details
$('#termGPA_' + iTermGPACounter + ' 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(formatTermCourseGrades()).show();
tr.addClass('shown');
}
});
iTermGPACounter += 1;
}
});
}
function formatTermGPA(table_id) {
return '<table class="table table-striped" id="termGPA_' + table_id + '">' +
'<thead><tr><th></th><th>Term #</th><th>Term GPA</th></tr></thead></table>';
}
function formatTermCourseGrades() {
return '<table class="table table-striped" id="termCourseGrades">' +
'<thead><tr><th>Course Name</th><th>Letter Grade</th></tr></thead><tr><td>Math</td><td>B+</td></tr></table>';
}

Answer 1

I posted this question in the DataTables forum as well and received an answer...in a nutshell, as a starting point I copied from the DataTables examples a table with a single child table. When I added the second child table, I didn't think to rename the variables, so it kept calling back to the parent table :(. Below is a working fiddle of the final result:
working fiddle
function loadDetailsByCourse() {
$.ajax({
type: "POST",
contentType: "application/json; charset=UTF-8",
url: "WebServices/myStudentProfile.asmx/getDetailsByCourse",
data: JSON.stringify({ pageID: pageID }),
dataType: "json",
cache: false,
success: function (response) {
gpa = response.d;
var yearTable = $('#msGrades').DataTable({
paging: false,
data: gpa,
columns: [
{
className: 'term-details-control openClose',
orderable: false,
data: null,
defaultContent: ''
},
{ data: "schoolYearLabel" },
{ data: "grade" },
{ data: "location" },
{ data: "gpaValue" }
],
order: [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#msGrades tbody').on('click', 'td.term-details-control', function () {
var tr = $(this).closest('tr');
var row = yearTable.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(formatTermGPA(iTermGPACounter)).show();
tr.addClass('shown');
var termTable = $('#termGPA_' + iTermGPACounter).DataTable({
data: row.data().termGPA,
paging: false,
searching: false,
columns: [
{
className: 'course-details-control openClose',
orderable: false,
data: null,
defaultContent: ''
},
{ data: "term" },
{ data: "gpaValue" }
],
order: [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#termGPA_' + iTermGPACounter + ' tbody').on('click', 'td.course-details-control', function () {
var tr = $(this).closest('tr');
var closestTable = tr.closest("table");
var row = closestTable.DataTable().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(formatTermCourseGrades(iCourseCounter)).show();
tr.addClass('shown');
var courseTable = $('#courseGrades_' + iCourseCounter).DataTable({
data: row.data().termCourseGrades,
paging: false,
searching: false,
columns: [
{ data: "courseName" },
{ data: "letterGrade" }
],
order: [[1, 'asc']]
});
}
iCourseCounter += 1;
});
iTermGPACounter += 1;
}
});
}
})
}
function formatTermGPA(table_id) {
return '<table class="table table-striped" id="termGPA_' + table_id + '">' +
'<thead><tr><th></th><th>Term #</th><th>Term GPA</th></tr></thead></table>';
}
function formatTermCourseGrades(table_id) {
return '<table class="table table-striped" id="courseGrades_' + table_id + '">' +
'<thead><tr><th>Course Name</th><th>Letter Grade</th></tr></thead></table>';
}