想要使用DataTables在一个表中嵌套一个表…在一个表中…可以吗？

我刚开始使用dataTables，所以我希望这将是一个学习的机会

我为一个学校系统工作，试图开发一个表格，显示学生每年的成绩。我希望管理员能够点击任何一年，该表将展开以显示每个学期（每个学年6学期）的学生GPA的子表。最后，我希望管理员能够单击任何学期，并显示学生在该学期实际参加的课程及其成绩的子表

我能够成功地让学期表显示出来，但我没有机会让课程表显示出来。我希望这不是一个“你不能在一个表中的一个表中嵌套一个表”的情况，但我不知道如何使它保持不变，尽管我很确定这与“细节控制”类有关

这里是一个链接到一把小提琴我放在一起显示我有…任何帮助完成它将不胜感激

var iTermGPACounter=1；
$（文档）.ready（函数（）{
loadDetailsByCourse（）；
});
函数loadDetailsByCourse（）{
变量表=$（'#msGrades'）。数据表({
数据：[{
“_类型”：“DMC.WebServices.detailGPA”，
“学年标签”：“14-15”，
“学校级别”：“02”，
“地点”：“高地”，
“等级”：“7级”，
“gpaValue”：“3.119”，
“termGPA”：[{
“期限”：“1”，
“gpaValue”：“3.857”，
“termCourseGrades”：[{
“courseNo”：“38929712”，
“章节编号”：“200”，
“courseName”：“健康2”，
“字母等级”：“A+”，
“部门”：“EL”
}, {
“courseNo”：“32320711”，
“第10节”，
“courseName”：“LANG ARTS 2”，
“字母等级”：“A+”，
“部门”：“EL”
}, {
“courseNo”：“32720711”，
“第10节”，
“课程名称”：“数学2”，
“字母等级”：“B”，
“系”：“硕士”
}]
}, {
“期限”：“2”，
“gpaValue”：“3.714”，
“termCourseGrades”：[{
“courseNo”：“38929712”，
“章节编号”：“200”，
“courseName”：“健康2”，
“字母等级”：“A”，
“部门”：“EL”
}, {
“courseNo”：“32320711”，
“第10节”，
“courseName”：“LANG ARTS 2”，
“字母等级”：“A”，
“部门”：“EL”
}, {
“courseNo”：“32720711”，
“第10节”，
“课程名称”：“数学2”，
“字母等级”：“A-”，
“系”：“硕士”
}]
}]
}, {
“_类型”：“DMC.WebServices.detailGPA”，
“学年标签”：“15-16”，
“学校级别”：“02”，
“地点”：“高地”，
“等级”：“8”，
“gpaValue”：“3.123”，
“termGPA”：[{
“期限”：“1”，
“gpaValue”：“3.143”，
“termCourseGrades”：[{
“courseNo”：“32320711”，
“第12节”，
“courseName”：“LANG ARTS 2”，
“字母等级”：“A”，
“部门”：“EL”
}, {
“courseNo”：“32720711”，
“第12节”，
“课程名称”：“数学2”，
“字母等级”：“D”，
“系”：“硕士”
}]
}]
}],
分页：false，
栏目：[{
className:“详细信息控件”，
可订购：错误，
数据：空，
默认内容：“”
}, {
数据：“学年标签”
}, {
数据：“等级”
}, {
数据：“位置”
}, {
数据：“gpaValue”
}],
订单：[
[1，‘asc’]
]
});
//为打开和关闭详细信息添加事件侦听器
$（'#mstbody'）。在（'click'，'td.details control'，function（）上{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（formatTermGPA（iTermGPACounter））.show（）；
tr.addClass（“显示”）；
var OinerTable=$（'#termGPA'+ITERMGPA计数器）。数据表({
数据：row.data（）.termGPA，
分页：false，
搜索：假，
栏目：[{
className:“详细信息控件”，
可订购：错误，
数据：空，
默认内容：“”
}, {
数据：“术语”
}, {
数据：“gpaValue”
}],
订单：[
[1，‘asc’]
]
});
//为打开和关闭详细信息添加事件侦听器
$（“#termGPA”+iTermGPACounter+“tbody”）。在（'click'，'td.details control'，function（）上{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（formatTermCourseGrades（））.show（）；
tr.addClass（“显示”）；
}
});
iTermGPACounter+=1；
}
});
}
函数格式TermGPA（表\u id）{
返回“”+
“学期#学期平均成绩”；
}
函数格式TermCourseGrades（）{
返回“”+
“课程名称字母GradeMathB+”；
}

我也在DataTables论坛上发布了这个问题，并得到了一个答案……简而言之，作为起点，我从DataTables示例中复制了一个带有单个子表的表。当我添加第二个子表时，我没有想到要重命名变量，所以它一直在调用父表：（.下面是最终结果的工作列表：

函数loadDetailsByCourse（）{
$.ajax({
类型：“POST”，
contentType:“应用程序/json；字符集=UTF-8”，
url:“WebServices/myStudentProfile.asmx/getDetailsByCourse”，
数据：JSON.stringify（{pageID:pageID}），
数据类型：“json”，
cache:false，
成功：功能（响应）{
gpa=响应。d；
变量年表=$（'#msGra）
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>';
}

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>';
}